javascript - 实现 David Bueza 使用的饼图标签

Question

我正在尝试实现 David Bueza's Pie chart labels在我自己的饼图中。我尝试根据我的需要调整使用的代码，到目前为止取得了成功。然而有趣的事情发生了。一件事是我的线条从饼图的外部开始，另一件事是两个标签在通往它们的线条中具有奇怪的弧线。

我创建了一个 plunk for you to look at ，我想知道是否有人可以告诉我这是什么原因造成的。我认为这两个问题都是由这段代码中的 pos 标识符引起的:

return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                return [arc.centroid(d2), outerArc.centroid(d2), pos];
            };          

但我找不到准确解决此问题的方法。

编辑1:感谢this question我已经设法修复了仅到达圆圈边缘的线条。这与 SVG 的绘制顺序有关。更新后的 Plunkr:link 。弧线问题仍然存在。

Answer 1

您看到的“弧线”只是从标签到弧线的路径。要解决此问题，只需编辑路径结束的位置:

pos[0] = radius *1.2* (midAngle(d2) < Math.PI ? 1 : -1); 

之前 1.2 是 0.95。这解决了这个问题。

您遇到的另一个问题是，您希望路径在到达切片外部时结束。您通过重新排列路径和切片的绘制顺序解决了这个问题，太棒了。但您现在需要鼠标悬停来更改切片的不透明度。现在显然，当您执行此操作时，您现在可以看到后面的路径。

为了解决这个问题，我会在路径和切片之间放置一个白色圆圈，这样您就看不到路径。所以现在的顺序是:

paths > white circle > slices

添加圆圈的代码:

重新排序 g 元素:

svg.append("g")
        .attr("class", "lines");

    svg.append("g")
    .attr('class', 'circleBehind')

  svg.append("g")
      .attr("class", "slices");
  svg.append("g")
    .attr("class", "labels");

添加圆圈:

var circleBehind = svg.select('.circleBehind').append('circle')
    .attr('r',radius * 0.95)
    .attr('cx',0)
    .attr('cy',0)
    .style('fill','white')

这可能是最简单的方法，否则你必须计算出路径的终点等

更新了plnkr:http://plnkr.co/edit/53SvO9ym6euMAwGfIpcU?p=preview