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

时间:2014-05-08 22:39:06

标签: javascript d3.js

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

Chart

更新

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

现在看起来像这样:

enter image description here

1 个答案:

答案 0 :(得分:1)

多么有趣的问题,我无法抗拒快速思考。 :-)

一般来说......

  1. 我首先会收集并排序图表中黑点的Y坐标。
  2. 然后我会取中间点并向外工作,根据需要将较高的坐标向上和向下推,这样它们之间就有一些最小的空间(基于我假设的文本高度)。
  3. 然后确定每个标签行的三个点。数学不会太难,因为你有从圆心到黑点的斜率。取出倾斜的线,直到你的标签插槽Y.
  4. 您可能想要分割工作并对图表的每个垂直一半执行两次。
  5. 你看起来非常漂亮,我喜欢它,祝你好运。