如何在饼图位置周围均匀划线?

Ser*_*rov 5 javascript d3.js

我将图表线作为指向饼图周围标签的指针.线条由3个点组成.我试图使这些线的水平端均匀地垂直展开,以便标签值适合.我需要的是一种算法或建议如何测量线点位置,以便它们可以像网格一样均匀定位.

图表

UPDATE

我通过使腿垂直而不是从圆心到达来简化任务,这样就不会浪费太多时间来实现效果.如果有兴趣的话,我会准备一个小提琴并在这里更新.

现在它看起来像这样:

在此输入图像描述

moo*_*oom 1

多么有趣的问题啊,我忍不住快速思考一下。:-)

一般来说...

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

你想要一个非常漂亮的外表,我喜欢它,祝你好运。