D3.js d3甜甜圈/饼图-在圆弧之间绘制直线_D3.js_Charts_Pie Chart_Donut Chart

D3.js d3甜甜圈/饼图-在圆弧之间绘制直线

d3.js charts

D3.js d3甜甜圈/饼图-在圆弧之间绘制直线,d3.js,charts,pie-chart,donut-chart,D3.js,Charts,Pie Chart,Donut Chart,找不到弧的端点以绘制从（0,0）到弧端点的线。图像已附加我可以找到弧的质心并画一条线，但这里我想把一条线拉到弧的末端，这样我就可以把这条线延伸到左边/右边（然后在这条线的端点附加一个圆）…在整个google上找不到这样的解决方案。任何帮助都将不胜感激。只要一个提示就可以了。一旦您通过 var pieData = myPieLayout(myDataset) 在pieData中，对于数据集的每个元素，您将发现两个属性，分别称为startAngle和endAngle。使用它，您可以通过迭代pi

找不到弧的端点以绘制从（0,0）到弧端点的线。图像已附加

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

一旦您通过

var pieData = myPieLayout(myDataset)

在pieData中，对于数据集的每个元素，您将发现两个属性，分别称为startAngle和endAngle。使用它，您可以通过迭代pieData元素并执行以下操作，从饼图中心找到所需点的位置

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

一旦将饼图布局应用于数据集，请执行以下操作

var pieData = myPieLayout(myDataset)

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

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

```
数据
```
——输入数据；输入数据数组中的对应元素
```
值
```
-弧的数值
```
索引
```
-弧的基于零的排序索引
```
startAngle
```
-弧的起始角度
```
endAngle
```
-弧的结束角
```
焊盘角度
```
-弧的焊盘角度

从中，您可以使用

startAngle

或

endAngle

绘制直线，因为它们包含圆弧的起点（和端点）

但有一个问题：与常规三角表示不同，D3 pie generator将

角度设置为12点钟：

角度单位是任意的，但如果您计划将饼图生成器与圆弧生成器结合使用，则应以弧度为单位指定角度，0在-y（12点钟）处，正角度顺时针进行

因此，我们必须减去

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数据=[10,12,50,15,20,40,6,32,17]；
可变宽度=500，
高度=400，
半径=数学最小值（宽度、高度）/2；
var color=d3.scaleOrdinal（d3.schemeCategory 10）
var pie=d3.pie（）
.sort（空）；
var arc=d3.arc（）
.内半径（半径-100）
.外层（半径-50）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var path=svg.selectAll（空）
.数据（pie（数据））
.enter（）.append（“路径”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）；
var lines=svg.selectAll（空）
.数据（pie（数据））
.输入（）
.附加（“行”）
.attr（“x1”，0）
.attr（“y1”，0）
.attr（“y2”，功能（d）{
返回Math.sin（d.startAngle-Math.PI/2）*（半径-50）
})
.attr（“x2”，函数（d）{
返回Math.cos（d.startAngle-Math.PI/2）*（半径-50）
})
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”，1）