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元素重疊

回答

相關問題