javascript - 如何使饼图位置周围的线条均匀？

Question

我将图表线作为指向饼图周围标签的指针。线由 3 个点组成。我试图使这些线的水平端垂直均匀分布，以便标签值可以正确匹配。我需要的是如何测量线点位置的算法或建议，以便它们可以像网格一样均匀定位。

更新

我通过使腿垂直而不是从圆心来稍微简化了任务，这样就不会在实现效果上浪费太多时间。如果有人感兴趣，我会准备一个 fiddle 并在这里更新。

现在看起来像这样:

Answer 1

多么有趣的问题，我忍不住想快速想一想。 :-)

一般来说...

1. 我会先收集图表中黑点的 Y 坐标并对其进行排序。
2. 然后我会取中点并向外工作，根据需要将较高的坐标向上推，将较低的坐标向下推，以便它们之间有一些最小空间(基于我假设的文本高度)。
3. 接下来就是确定每条标签线的三个点了。数学不会太难，因为你有从圆心到黑点的线的斜率。取出斜线，直到碰到标签槽 Y。
4. 您可能想要拆分工作并进行两次，一次用于图表的垂直半边。

你追求的是非常漂亮的造型，我喜欢，祝你好运。