javascript - 如何获取沿饼图边缘的切片坐标？

Question

我正在使用 d3.layout.pie() 使用 D3 创建饼图。 它看起来像这个，没有黑点(我已将它们手动放入 Photoshop 中以说明我的问题)。我想知道如何计算这些位于表面中间的点的坐标，以便在那里放置一些工具提示。我不是要一个完整的解决方案，而是更多关于如何做的原则。 谢谢。

Answer 1

您可以使用 following equations计算沿圆周的点:

x = cx + r * cos(a)
y = cy + r * sin(a)

其中(cx, cy)是圆心，r是半径，a是 Angular 。

为了让这个对您有用，您需要一种方法来根据图表上的饼图切片计算 Angular - 见下文。

---

根据d3 documentation for pie layouts ，pie 函数返回弧列表，因此您可以处理此数据以计算每个点:

pie(values[, index])

Evaluates the pie function on the specified array of values. An optional index may be specified, which is passed along to the start and end angle functions. The return value is an array of arc descriptors

• value - the data value, returned by the value accessor.
• startAngle - the start angle of the arc in radians.
• endAngle - the end angle of the arc in radians.
• data - the original datum for this arc.

据推测，对于每条弧，您只需取 endAngle 和 startAngle 之间距离的一半，然后将您的点放在那里。

---

就其值(value)而言，这是来自 pie.js 的代码用于计算每个弧:

// Compute the arcs!
// They are stored in the original data's order.
var arcs = [];
index.forEach(function(i) {
  var d;
  arcs[i] = {
    data: data[i],
    value: d = values[i],
    startAngle: a,
    endAngle: a += d * k
  };
});
return arcs;

---

这有帮助吗？