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

Question

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

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

Answer 1

当您将数据数组传递给饼图生成器时，它会返回具有以下属性的对象数组：

\n\n

\n
• data- 输入数据；输入数据数组中的相应元素。
\n
• value- 弧的数值。
\n
• index- 弧的从零开始的排序索引。
\n
• startAngle- 圆弧的起始角度。
\n
• endAngle- 圆弧的结束角度。
\n
• padAngle- 圆弧的焊盘角度。
\n

\n\n

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

\n\n

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

\n\n

\n

角度单位是任意的，但如果您计划将饼图生成器与圆弧生成器结合使用，则应以弧度指定角度，0 位于 -y (12 o\xe2\x80\x99clock) 处，正角度顺时针方向进行。

\n

\n\n

因此，我们必须进行减法Math.PI/2才能得到正确的角度。

\n\n

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

\n\n

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

\n\n

检查演示：

\n\n

\r\n

\r\n

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

\r\n

var data = [10, ,12, 50, 15, 20, 40, 6, 32, 17];\r\n\r\nvar width = 500,\r\n  height = 400,\r\n  radius = Math.min(width, height) / 2;\r\n\r\nvar color = d3.scaleOrdinal(d3.schemeCategory10)\r\n\r\nvar pie = d3.pie()\r\n  .sort(null);\r\n\r\nvar arc = d3.arc()\r\n  .innerRadius(radius - 100)\r\n  .outerRadius(radius - 50);\r\n\r\nvar svg = d3.select("body")\r\n  .append("svg")\r\n  .attr("width", width)\r\n  .attr("height", height)\r\n  .append("g")\r\n  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");\r\n\r\nvar path = svg.selectAll(null)\r\n  .data(pie(data))\r\n  .enter().append("path")\r\n  .attr("fill", function(d, i) {\r\n    return color(i);\r\n  })\r\n  .attr("d", arc);\r\n\r\nvar lines = svg.selectAll(null)\r\n  .data(pie(data))\r\n  .enter()\r\n  .append("line")\r\n  .attr("x1", 0)\r\n  .attr("y1", 0)\r\n  .attr("y2", function(d) {\r\n    return Math.sin(d.startAngle - Math.PI / 2) * (radius - 50)\r\n  })\r\n  .attr("x2", function(d) {\r\n    return Math.cos(d.startAngle - Math.PI / 2) * (radius - 50)\r\n  })\r\n  .attr("stroke", "black")\r\n  .attr("stroke-width", 1)

\r\n

\r\n

\r\n

\n