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

Svg text element being overlapped by another svg element

本文关键字：Svg 元素 重叠 另一个 文本      更新时间：2023-09-26

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

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

.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末尾添加了一个新的和。老实说，我不知道这是否重要，但我认为我应该提到它。

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

看看这把小提琴。问题消失了，因为我调用了出口：

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

一个更好的解决方案可能只是在更新前删除所有文本：

tests(data);
d3.selectAll('text').remove();
tests(data2);
相关文章：