Question

我正在尝试将d3js弧上的矩形放置在0、90、180和270度的位置。这是我放在一起的一个简单示例，该示例使用圆弧生成器创建4个圆弧，并使用arc.centroid函数将矩形放置在每个圆弧的中心点：

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Rotate rectangles to arc positions: 0, 90, 180 & 270 </title>
</head>

<style>
path {
    fill: white;
    stroke: black;
}
</style>

<body>
  <svg width="700" height="220">
     <g transform="translate(200, 110)"></g>
  </svg>

  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>

  <script>
    // Create an arc generator with configuration
    var arcGenerator = d3.arc()
        .innerRadius(80)
        .outerRadius(100);

    var arcData = [
        {startAngle: 0, endAngle: Math.PI * 2 / 4, degree: 0},
        {startAngle: Math.PI * 2 / 4, endAngle: Math.PI, degree: 90},
        {startAngle: Math.PI, endAngle: Math.PI * 3 / 2, degree: 180},
        {startAngle: Math.PI * 3 / 2, endAngle: Math.PI * 2, degree: 270},
    ];

    // Create a path element and set its d attribute
    d3.select('g')
        .selectAll('path')
        .data(arcData)
        .enter()
        .append('path')
        .attr('d', arcGenerator);

    // Add labels, using .centroid() to position
    d3.select('g')
        .selectAll('rect')
        .data(arcData)
        .enter()
        .append('rect')
        .each(function(d) {
            var centroid = arcGenerator.centroid(d);
            d3.select(this)
                .attr('x', centroid[0])
                .attr('y', centroid[1])
                .attr('width', 10)
                .attr('height', 35)
        });
  </script>
</body>
</html>

结果是：

相反，我希望将每个矩形放置在每个弧的开始或结束位置并旋转，以使每个矩形都是纵向的（宽10像素，长35像素）。

这是我的：jsfiddle

Answer 1

为所需的角度创建弧数据记录，并将centroid()用于这些虚拟弧

在g元素后面有一些非法的html。

// Create an arc generator with configuration
    var arcGenerator = d3.arc()
        .innerRadius(80)
        .outerRadius(100);
        
    var arcData = [
        {startAngle: 0, endAngle: Math.PI * 2 / 4, degree: 0},
        {startAngle: Math.PI * 2 / 4, endAngle: Math.PI, degree: 90},
        {startAngle: Math.PI, endAngle: Math.PI * 3 / 2, degree: 180},
        {startAngle: Math.PI * 3 / 2, endAngle: Math.PI * 2, degree: 270},
    ];

    var rectData = arcData.map(d => { return {startAngle: d.startAngle, endAngle:d.startAngle}; });

    // Create a path element and set its d attribute
    d3.select('g')
        .selectAll('path')
        .data(arcData)
        .enter()
        .append('path')
        .attr('d', arcGenerator);

    // Add labels, using .centroid() to position
    d3.select('g')
        .selectAll('.grect')
        .data(rectData)
        .enter()
        .append('g')
        .attr('class', 'grect')
        .attr('transform', d => {
            var centroid = arcGenerator.centroid(d);
            return `translate(${centroid[0]},${centroid[1]})`;
        })
        .append('rect')
        .attr('x', -5)
        .attr('y', -17)
        .attr('width', 10)
        .attr('height', 35);

path {
	fill: white;
	stroke: black; 
  }

<meta charset="utf-8">
<head>
  <title>Rotate rectangles to arc positions: 0, 90, 180 and 270 </title>
</head>

<body>
  <svg width="700" height="220">
  	 <g transform="translate(200, 110)"></g>
  </svg>

  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
</body>

修改

您可以即时创建rectData。

    d3.select('g')
        .selectAll('.grect')
        .data(arcData)
        .enter()
        .append('g')
        .attr('class', 'grect')
        .attr('transform', d => {
            var centroid = arcGenerator.centroid({startAngle: d.startAngle, endAngle:d.startAngle});
            return `translate(${centroid[0]},${centroid[1]})`;
        })
        .append('rect')
        .attr('x', -5)
        .attr('y', -17)
        .attr('width', 10)
        .attr('height', 35);

在D3js中弧形旋转矩形

1 个答案: