如何获取饼图边缘切片的坐标? [英] 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 函数返回一个弧列表，因此您可以处理此数据以计算您的每个点:

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])

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 - 弧度的结束角度.
• data - 此弧的原始数据.

大概你可以为每个弧取 endAngle 和 startAngle 之间距离的一半，然后把你的点放在那里.

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

就其价值而言，这是来自 pie.js<的代码/code> 用于计算每个弧:

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屋！