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

Question

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

Answer 1

您可以使用以下等式计算圆周上的点:

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

(cx, cy)圆的中心在哪里,r是半径,a是角度.

为了使它适用于您,您需要一种基于图表上的饼图计算角度的方法 - 见下文.

根据饼图布局的d3文档,该pie函数返回一个弧列表,因此您可以处理此数据来计算每个点:

馅饼(值[,索引])

计算指定数组值上的饼图函数.可以指定可选索引,该索引被传递给起始和结束角度函数.返回值是一个弧描述符数组

• value - 值访问器返回的数据值.
• startAngle - 以弧度表示的弧的起始角度.
• endAngle - 以弧度表示的弧的结束角度.
• data - 此弧的原始数据.

想必你可以只需要一半的距离之间endAngle,并startAngle为每个弧,并把你的观点存在.

对于它的价值,这里的代码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;

这有帮助吗？