实施 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 I've managed to fix the lines only reaching to the edge of the circle. This had to do with the order of drawing of the SVGs. Updated Plunkr: link。电弧问题仍然存在。

Answer 1

您看到的 'arcs' 只是从标签到圆弧的路径。要解决这个问题，只需编辑路径结束的地方：

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

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

您遇到的另一个问题是，您希望路径在到达切片外部时结束。您通过重新排列绘制路径和切片的顺序解决了这个问题，太棒了。但是您现在想要 mouseover 来更改切片的不透明度。现在很明显，当你这样做时，你现在可以看到后面的路径。

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

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

实施 David Bueza 使用的饼图标签

Implementing Pie Chart labels as used by David Bueza

javascript

labels

d3.js