Svg文本元素与另一个svg元素重叠

Question

我现在正在建立一个饼图，而且大部分已完成。

无论如何，我试图在每个饼图上实现一些悬停效果，但我遇到了一个我无法解决的问题。将鼠标悬停在元素上时，文本的大小会增加，并且还会使用过滤器添加黑色背景。这个问题是文本有时隐藏在其他元素后面，就好像这些元素位于其上面一样。我解决此问题的最佳解决方案是增加可见性并使其变得重要。

.pieChart svg>g text.hover {
  font-size: 1.3em;
  fill: #fff;
  filter: url(#pieTextFilter);
  visibility: visible !important;
}

然而，这并没有解决我的问题。

这是一个代表问题的jsfiddle（将鼠标悬停在切片4上）：http://jsfiddle.net/tinygram/22o1epyp/3/

如果您熟悉D3，可能需要注意的是，只有在我更新图表后才会发生这种情况。如果你看看我的jsfiddle的底部，你会看到我启动图表，然后再次使用一些更新的数据运行它。我注意到这增加了一个新的，并在dom中的svg结束。老实说，我不知道这是否重要，但我想我应该提一下。

Answer 1

正如@LarsKotthoff在评论中提到的那样，一切都在顺序中。您最初构建一个包含4个切片的饼图，然后添加第5个切片。因此，输入选择首先添加4个切片和4个标签。在添加第5个切片时，它会更新前4个切片/标签并输入第5个切片/标签。然后在第4个标签的顶部添加第5个切片。

见fiddle。问题消失了，因为我调用了退出：

tests(data);
tests({});
tests(data2);

更好的解决方法可能是在更新前删除所有文本：

tests(data);
d3.selectAll('text').remove();
tests(data2);