如何用D3创建的饼图计算饼图切片的中心？

Question

我用D3创建了一个饼图。我想计算每个饼图切片的中心，因此我可以从每个饼图切片的中心绘制一条线/路径。在该行的末尾，会有文本。

代码游乐场

我想要这样的东西，但是当它位于饼图内部时，该线将不可见。

Answer 1

正如 @Mark 在 comment 中指出的那样， arc.centroid 将为您提供圆弧的中心。但根据你的绘图，这并不完全是你想要的。对于每条线，您要寻找两个点：饼图的中心（所有线都相同）和位于每个线段的中心angle但半径在外部某处的点。

您已经知道饼图的中心，因为它是坐标系的中心。在笛卡尔（x，y）坐标中它是（0, 0），在极（半径，角度）坐标中它是（0，没关系）。

每条线的角度是

startAngle()

每个元素中

endAngle()

和

Pie_Data

的平均值。

您可以像这样生成数据：

const lineAngles = Pie_Data.map(d => (d.endAngle() - d.startAngle)/2);

每条线的半径相同，并且可以是比

outerRadius

大的任意值。我称之为

lineRadius

。

此时使用 pointRadial() 从 0, 0 到我们上面计算的 pointRadial(angle, radius) 画一条线。

lineAngles.map(d => {
  const endPoint = pointRadial(d, lineRadius);
  return `<line x1="0" y1="0" x2=${endPoint[0]} y2=${endPoint[1]}></line>`;
}).join("\n");

请注意，我没有使用 JSX，因此请相应调整:)