Question

我想在0,45,90,135,180度绘制矩形，以便在带有D3.js的SVG Circle周围绘制

用下面的代码我可以在0/360度绘制矩形

var circles = vis.svg.selectAll("circle")
                       .data(circleRadii)
                       .enter()
                       .append("circle");
var circleAttributes = circles
                     .attr("cx", 190)
                     .attr("cy", 190)
                     .attr("r", function (d) { return d; })
                     .style("fill", "none")
                .style("stroke", "red")
                .style("fill", "none");
var chairOriginX = 190 + ((340) * Math.sin(0));
var chairOriginY = 190 - ((340) * Math.cos(0));

var chairWidth = 20;
var chair = vis.svg.append("rect").attr({
     x: chairOriginX - (chairWidth / 2),
     y: chairOriginY - (chairWidth / 2),
     width: chairWidth,
     opacity: 1,
     height: 50,
     fill: "none",
     stroke: "blue"    
});

但不确定如何在45，90 ....度

打印

Answer 1

一些trigonometry knowledge：

角度的正弦是相对边长度与斜边长度的比值，

角度的余弦是相邻边长度与斜边长度之比

然后，您可以计算矩形的位置（在这种情况下，它们的左上角）

.attr('x', function (d) {
    var rad = (ang0 - d.angle) * Math.PI / 180;
    return x0 + Math.sin(rad) * r;
})
.attr('y', function (d) {
    var rad = (ang0 - d.angle) * Math.PI / 180;
    return y0 + Math.cos(rad) * r;
})

其中ang0是起始角度（0位于底部），x0和y0是圆圈的中心，r是半径

和演示

＆＃13;

var squares = [
    {angle: 45, color: 'red'},
    {angle: 90, color: 'green'},
    {angle: 180, color: 'blue'},
    {angle: 225, color: 'yellow'},
];

var x0 = 190, y0 = 190, r= 100, w = 20, h= 50, ang0 = 180;
d3.select('svg').selectAll("rect").data(squares)
    .enter()
    .append("rect")
    .attr({width: w, height:h})
    .attr('x', function (d) {
        var rad = (ang0 - d.angle) * Math.PI / 180;
        return x0 + Math.sin(rad) * r;
    })
    .attr('y', function (d) {
        var rad = (ang0 - d.angle) * Math.PI / 180;
        return y0 + Math.cos(rad) * r;
    })
    .attr('fill', function(d) {return d.color; })

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width='300' height='300'>
   <circle cx='190' cy='190' r='100' fill='none' stroke='red'></circle>
</svg>

＆＃13;

如果要旋转矩形，可以添加transform属性。例如：

.attr('transform', function(d) {
    var x = this.getAttribute('x'),
        y = this.getAttribute('y');

    return "rotate ("+ d.angle +" "+ x +" "+ y +")"
});

或者，如果你想要与圆相切的矩形，

.attr('x', function (d) {
    var rad = (ang0 - d.angle) * Math.PI / 180;
    return x0 + Math.sin(rad) * r - w/2 ;
})
.attr('y', function (d) {
    var rad = (ang0 - d.angle) * Math.PI / 180;
    return y0 + Math.cos(rad) * r;
})
.attr('fill', function(d) {return d.color; })
.attr('transform', function(d) {
    var x = parseInt(this.getAttribute('x'), 10) + w/2,
        y = parseInt(this.getAttribute('y'), 10);

    return "rotate ("+ (180 + d.angle)+" "+ x +" "+ y+")"
})

＆＃13;

var squares = [
    {angle: 45, color: 'red'},
    {angle: 90, color: 'green'},
    {angle: 180, color: 'blue'},
    {angle: 225, color: 'yellow'},
];

var x0 = 190, y0 = 190, r= 100, w = 20, h= 50, ang0 = 180;
d3.select('svg').selectAll("rect").data(squares)
    .enter()
    .append("rect")
    .attr({width: w, height:h})
    .attr('x', function (d) {
        var rad = (ang0 - d.angle) * Math.PI / 180;
        return x0 + Math.sin(rad) * r - w/2 ;
    })
    .attr('y', function (d) {
        var rad = (ang0 - d.angle) * Math.PI / 180;
        return y0 + Math.cos(rad) * r;
    })
    .attr('fill', function(d) {return d.color; })
    .attr('transform', function(d) {
        var x = parseInt(this.getAttribute('x'), 10) + w/2,
            y = parseInt(this.getAttribute('y'), 10);
    
        return "rotate ("+ (180 + d.angle)+" "+ x +" "+ y+")"
    })
    ;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width='500' height='500'>
   <circle cx='190' cy='190' r='100' fill='none' stroke='red'></circle>
  <line x1="190" y1="0"  x2="190" y2="400" stroke="black" />
  <line x1="0" y1="190"  x2="400" y2="190" stroke="black" />
</svg>

＆＃13;

如何在D3.js的SVG Circle周围绘制0,45,90,135,180度的矩形等

1 个答案: