javascript - 如何使用 D3.js 在 SVG 圆周围绘制 0,45,90,135,180 度等的矩形

Question

我想用 D3.js 在 SVG 圆周围绘制 0,45,90,135,180 度的矩形

使用下面的代码我可以绘制 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 :

• the sine of an angle is the ratio of the length of the opposite side to the length of the hypotenuse,
• the cosine of an angle is the ratio of the length of the adjacent side to the length of the hypotenuse

然后您可以计算矩形的位置(在本例中为左上角)

.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 是起始 Angular (0 位于底部)，x0 和 y0 是圆的中心， r 其半径

还有演示

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)
    .attr('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; })

<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>

如果您想旋转矩形，可以添加 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+")"
})

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)
    .attr('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+")"
    })
    ;

<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>