javascript - 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 末尾添加一个新的 and 。老实说，我不知道这是否重要，但我想我应该提一下。

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);