d3.js - d3 donut /饼图 - 在圆弧之间画一条线

Question

无法找到圆弧的端点以从 (0,0) 到圆弧的端点绘制一条线..图像附加



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

Answer 1

当您将数据数组传递给 pie generator 时，它返回具有以下属性的对象数组:

data - 输入数据；输入数据数组中的相应元素。

value - 弧的数值。

index - 弧的从零开始的排序索引。

startAngle - 圆弧的起始角度。

endAngle - 圆弧的结束角度。

padAngle - 弧的垫角。

从这些中，您可以使用 startAngle或 endAngle绘制线条，因为它们包含弧的起点(和端点)。

但有一个问题:与常规三角函数表示不同，D3 饼图生成器将 0 12点钟方向:

The angular units are arbitrary, but if you plan to use the pie generator in conjunction with an arc generator, you should specify angles in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

因此，我们必须减去 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)
}) 

检查演示:

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)

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