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

我正在构建一个饼图，并且大部分都完成了。Svg文本元素被另一个svg元素重叠

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

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

但是，这并没有解决我的问题。

下面是表示这个问题（悬停在您切片4鼠标）指定的jsfiddle：http://jsfiddle.net/tinygram/22o1epyp/3/

如果你熟悉D3，它可能要注意，发生这种情况后，才更新图表是很重要的。如果你看看我的jsfiddle的底部，你会看到我正在启动图形，然后再运行一些更新的数据。我注意到这在dom中增加了一个新的和最后的svg。我真的不知道这是否重要，但我想我应该提及它。

来源

2015-02-07 user2767260

在SVG元素的顺序由确定您添加元素的顺序。所以任何应该出现在顶端的东西都应该在DOM中最后。见例如[这个问题]（http://stackoverflow.com/questions/14167863/how-can-i-bring-a-circle-to-the-front-with-d3）。 – 2015-02-07 21:03:33

谢谢拉尔斯。过去两天你帮了我很大忙。 – user2767260 2015-02-08 01:22:53

正如@LarsKotthoff在他的评论中提到的，这一切都是按顺序排列的。你最初建立一个4片饼图，然后添加第5片。所以输入选择首先添加4片和4个标签。在添加第5个切片时，它更新前4个切片/标签并输入第5个切片/标签。然后在第4个标签上添加第5个切片。

看到这个fiddle。问题就没有了，因为我已经调用出口：

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

更好的修复可能只是更新前删除所有文字：

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

来源

2015-02-07 23:19:27 Mark

谢谢马克。我最终做了和你的建议非常相似的事情。我一定要保留路径下的文本，即使添加了一个。我碰到一个问题，让他们相对于彼此保持秩序，但最终也得到了解决方案。 – user2767260 2015-02-08 01:23:52

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

回答

相关问题