8

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

圆图

4

3 回答 3

8

您可以使用以下等式计算沿圆周的点：

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

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

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

根据pie layouts 的 d3 文档，该pie函数返回一个弧列表，因此您可以处理此数据以计算每个点：

饼图（值 [，索引]）

在指定的值数组上计算 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;

这有帮助吗？

于 2013-07-02T13:44:10.967 回答
3

我知道你问这个问题已经有一年了，但只是提出一个可能对其他人有帮助的答案。尝试在要显示的圆的变换中使用 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-27T21:14:56.113 回答
0

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

x = cx + r * cos(a)

y = cy + r * sin(a)

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

于 2016-05-28T19:18:56.067 回答