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 个切片。所以enter selection首先添加4个切片和4个标签。在添加第 5 个切片时，它更新前 4 个 slices/labels 并进入第 5 个 slice/label。然后在第 4 个标签的顶部添加第 5 个切片。

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

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

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

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

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

Svg text element being overlapped by another svg element

javascript

css

jquery

svg

d3.js