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

Question

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

Answer 1

您可以使用following equations计算圆周上的点：

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

(cx, cy)是圆的中心，r是半径，a是角度。

为了让它适合您，您需要一种基于图表上的饼图计算角度的方法 - 见下文。

---

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

  

pie（values [，index]）

     

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

     

  
• value - 值访问器返回的数据值。
  
• startAngle - 以弧度为单位的弧的起始角度。
  
• endAngle - 弧度的弧度结束角度。
  
• 数据 - 此弧的原始数据。
  

据推测，你可以为每个弧线占据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;

---

这有帮助吗？

Answer 2

我知道你问这个问题已经过了一年，但只是回答可能有助于其他人的问题。 尝试在要显示的圆的变换中使用arc.centriod（）。

像这样的东西

enterMenu.append("circle")
            .attr("r", 5)
            .attr('transform',function(d){
              return "translate(" + arc.centriod(d) + ")";
            });

这应该将圆圈准确地放在切片之间。在上面的函数中，d是弧的endAngle。

供您参考查看此链接http://bl.ocks.org/Guerino1/2295263

Answer 3

这可能听起来微不足道，但我试图找到每个切片内的x和y坐标，当我看到上面公布的公式时，

x = cx + r * cos（a）

y = cy + r * sin（a）

，可以通过将r从（cx + 1或cy + 1）增加到半径长度，并通过从原点角度到目标角度增加（a），然后添加（cx，cy）来重复。希望它可以帮到某人。