如何获得饼图边缘坐标的饼图？ [英] How to get coordinates of slices along the edge of a pie chart?

问题描述

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

I am creating a piechart with D3 using d3.layout.pie(). It looks like this one, without black dots (I've put them manually in Photoshop to illustrate my issue). I wonder how I can calculate coordinates of these dots, that are in the middle of the surface to place some tooltips there. I am not asking for a finished solution but more about the principle how to do it. Thanks.

推荐答案

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

You can use the following equations to calculate a point along the circumference of a circle:

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

（cx，cy）是圆的中心， r 是半径， a 是角度。

Where (cx, cy) is the center of the circle, r is the radius, and a is the angle.

为了让这个功能适用于您，您需要一种根据图表上的饼图计算角度的方法 - 如下所示。

In order for this to work for you, you will need a way to computing the angle based upon the pie slices on your chart - see below.

根据 d3文档用于饼图布局， pie 函数返回一个圆弧列表，因此您可以处理此数据以计算每个点： p>

According to the d3 documentation for pie layouts, the pie function returns a list of arcs, so you can process this data to calculate each of your points:

pie（values [，index]）

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

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 - 值存储器返回的数据值。


• startAngle - 圆弧的起始角度，以弧度表示。


• endAngle - 弧度的终止角度，以弧度表示。

• 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.

假设你只需要占用一半的距离<$ c

Presumably you could just take half the distance between endAngle and startAngle for each arc, and place your point there.

对于值得的，这里是来自 pie.js 用于计算每个弧：

For what it's worth, here is the code from pie.js that is used to compute each arc:

// 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;

---

这是否有帮助？

---

Does that help?

这篇关于如何获得饼图边缘坐标的饼图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！