gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:44:39 26 4
gpt4 key购买 nike

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

Circle chart

最佳答案

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

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

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

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


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

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.

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


就其值(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;

这有帮助吗?

关于javascript - 如何获取沿饼图边缘的切片坐标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17427088/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com