SVG 繪圖順序

這可能令人沮喪：你使用 D3.js 進行視覺化，但你想要在頂部的矩形隱藏在另一個矩形後面，或者你計劃在某個圓圈後面的線實際上是在它上面。你嘗試使用 CSS 中的 z-index 解決此問題，但它不起作用（在 SVG 1.1 中）。

解釋很簡單：在 SVG 中，元素的順序定義了繪畫的順序，繪畫的順序定義了誰在頂部。

SVG 文件片段中的元素具有隱式繪製順序，SVG 文件片段中的第一個元素首先被繪製。後續元素繪製在先前繪製的元素之上。

所以，假設我們有這個 SVG：

<svg width="400" height=200>
    <circle cy="100" cx="80" r="60" fill="blue"></circle>
    <circle cy="100" cx="160" r="60" fill="yellow"></circle>
    <circle cy="100" cx="240" r="60" fill="red"></circle>
    <circle cy="100" cx="320" r="60" fill="green" z-index="-1"></circle>
</svg>

他有四個圈子。藍色圓圈是第一個畫，所以其他所有人都會貶低。然後我們有黃色的那個，然後是紅色的，最後是綠色的。綠色的是最後一個，它將位於頂部。

這就是它的樣子：

http://i.stack.imgur.com/1t3eC.jpg

用 D3 改變 SVG 元素的順序

那麼，是否有可能改變元素的順序？我可以在綠色圓圈前面製作紅色圓圈嗎？

是。你需要考慮的第一種方法是程式碼中的行的順序：首先繪製背景的元素，然後在程式碼中繪製前景的元素。

但是我們可以動態地改變元素的順序，即使它們被繪製後也是如此。你可以編寫幾個簡單的 JavaScript 函式來執行此操作，但 D3 已經有兩個很好的功能，selection.raise() 和 selection.lower()。

根據 API：

selection.raise()：按順序重新插入每個選定元素作為其父元素的最後一個子元素。selection.lower()：按順序重新插入每個選定元素作為其父元素的第一個子元素。

因此，為了展示如何操作我們之前的 SVG 中元素的順序，這裡是一個非常小的程式碼：

d3.selectAll("circle").on("mouseover", function(){
    d3.select(this).raise(); 
});

它有什麼作用？它選擇所有圓圈，當使用者將滑鼠懸停在一個圓圈上時，它會選擇該特定圓圈並將其帶到前面。非常簡單！

而這裡是的 jsfiddle 與實時程式碼。