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 与实时代码。