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];
            };

但我找不到如何解决这个问题。

EDIT1：感谢this question我设法修复了只到达圆圈边缘的线条。这与SVG的绘制顺序有关。更新了Plunkr：link。 arc stil的问题仍然存在。

Answer 1

＆＃39;弧线＆＃39;你看到的只是从标签到弧线的路径。要解决此问题，只需编辑路径结束的位置：

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

此前1.2为0.95。这解决了这个问题。

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

要解决这个问题，我会在路径和切片之间放一个白圈，这样你就看不到路径了。所以现在订单是：

路径＆gt; <白色圆圈>片

添加圈子的代码：

重新订购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

1 个答案: