d3圆环/饼图 - 在弧之间画一条线

Question

无法找到弧的端点，以便从（0,0）到弧的端点绘制一条线...附加图像

我可以找到弧的质心并画一条线但是在这里我想拉一条线到弧的末端，这样我就可以将那条线延伸到左/右边（然后在线的端点附加圆圈） ...在整个谷歌上找不到任何这样的解决方案。任何帮助将不胜感激。只需要提示即可。

Answer 1

将数据数组传递给pie generator时，它会返回一个具有以下属性的对象数组：

• data - 输入数据;输入数据数组中的相应元素。
• value - 弧的数值。
• index - 弧的基于零的排序索引。
• startAngle - 弧的起始角度。
• endAngle - 弧的结束角度。
• padAngle - 弧的垫角。

通过这些，您可以使用startAngle或endAngle绘制线条，因为它们可以保持弧线。起点（和终点）。

但有一个问题：与常规三角表示不同，D3饼形发生器将0角度设置为12 o＆＃39;时钟：

  

角度单位是任意的，但如果您计划将饼形发生器与弧形发生器结合使用，则应指定以弧度表示的角度，其中0表示-y（12点钟），正角度表示顺时针方向。< / p>

因此，我们必须减去Math.PI/2以获得正确的角度。

在下面的演示中，使用正弦和余弦计算坐标：

.attr("y2", function(d) {
    return Math.sin(d.startAngle - Math.PI / 2) * (outerRadius)
})
.attr("x2", function(d) {
    return Math.cos(d.startAngle - Math.PI / 2) * (outerRadius)
}) 

查看演示：

＆＃13;

＆＃13;

var data = [10, ,12, 50, 15, 20, 40, 6, 32, 17];

var width = 500,
  height = 400,
  radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal(d3.schemeCategory10)

var pie = d3.pie()
  .sort(null);

var arc = d3.arc()
  .innerRadius(radius - 100)
  .outerRadius(radius - 50);

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll(null)
  .data(pie(data))
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);

var lines = svg.selectAll(null)
  .data(pie(data))
  .enter()
  .append("line")
  .attr("x1", 0)
  .attr("y1", 0)
  .attr("y2", function(d) {
    return Math.sin(d.startAngle - Math.PI / 2) * (radius - 50)
  })
  .attr("x2", function(d) {
    return Math.cos(d.startAngle - Math.PI / 2) * (radius - 50)
  })
  .attr("stroke", "black")
  .attr("stroke-width", 1)

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过执行

将饼图布局应用于数据集

var pieData = myPieLayout(myDataset)

在pieData中，您会发现，对于数据集的每个元素，有两个名为startAngle和endAngle的属性。使用它，您可以通过迭代pieData元素并执行

，从饼图的中心找到所需点的位置。

var x = Math.cos(d.endAngle)*radius
var y = Math.sin(d.endAngle)*radius