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

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

Circle chart

来源

2013-07-02 Sergei Basharov

你有没有得到这个工作？ –

@JustinEthier我可以告诉你，使用你的答案我有类似的工作。虽然我发现我在计算中最终使用了两次偏移角度（感觉不对）。但是你可以在http://jsfiddle.net/IPWright83/s51mt3tv/4/ – Ian

可以使用following equations沿圆的周长计算点：

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

哪里(cx, cy)为圆心，r为半径，并a是角度。

为了让它适用于您，您将需要一种基于图表上的饼形切片计算角度的方法 - 请参阅下文。

按照d3 documentation for pie layouts，则pie函数返回弧的列表，这样你就可以处理这个数据来计算每个点：

馅饼（值[，索引]）

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

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;

这是否帮助？

来源

2013-07-02 13:44:10

上看到这个，上面的公式很好，但是如果你想在你的饼图的MIDDLE中标签，而不是在头部，你应该使用： ' \t \t VAR halfAngle：CGFloat的=（endAngle +由startAngle）/2.0 \t \t \t 如果\t endAngle <由startAngle { \t \t \t halfAngle + = CGFloat的（M_PI） \t \t} \t \t \t \t让x = centre.x + radius * 0.5 * cos（halfAngle） \t \t让y = centre.y + radius * 0.5 * sin（halfAngle） ' – Dewey

我知道你问了这个问题的那一年，但只是在可能帮助其他人的问题上下了一个答案。尝试在要显示的圆的变换中使用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

来源

2015-03-27 21:14:56 Chait

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

X = CX + R * COS（一）

Y = CY + R * SIN（一）

，可以通过从（CX + 1或CY + 1）到半径长度加大研发完成的，并重复通过将（a）从原点角度增加到目标角度，然后将（ cx，cy）。希望它能帮助别人。

来源

2016-05-28 19:18:56 user1420482

我想了解您所描述的数学，但我不明白“增加r”或“增加（a）”的意思......你能提供一个例子吗？ – Dewey

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

回答

馅饼（值[，索引]）

相关问题