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

Question

我现在正在构建一个饼图，并且已经基本完成了。

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

.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 个切片。所以 enter selection 首先添加了 4 个切片和 4 个标签。在添加第 5 个切片时，它会更新前 4 个切片/标签并输入第 5 个切片/标签。然后在第 4 个标签之上添加第 5 个切片。

看到这个fiddle。问题消失了，因为我调用了出口：

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

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

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