如何在d3中调整图形的“深度”?

时间:2015-04-21 18:52:29

标签: javascript d3.js graphics overlap depth

我正在使用d3编写动画,我似乎找不到一种方法可以轻松确保图形始终出现"背后"其他图形。

具体来说,我正在处理线条和圆圈(想象一个有向图),看起来很糟糕,有些线条位于圆圈顶部,而其他线条则位于下方。有没有办法设置某些图形的z /深度,在这种情况下我的线,手动?如果这看起来像谷歌一样,我很抱歉,但我试图打字"图形深度d3"和其他变化,什么都没有。

编辑:接受的答案有效,可以找到问题的更详细说明here

1 个答案:

答案 0 :(得分:2)

SVG没有z-index属性或类似属性,元素按照它们在DOM中出现的顺序绘制 - 更高的元素在后面添加的元素后面绘制。< / p>

将元素分组到图层的最简单方法是使用g元素。因此,在您的示例中,我将使用两个g组,一个用于行,一个用于圆圈。首先为行添加g,然后在其下面添加所有行。如果您随后将圈子添加到之后添加的第二个g,则所有圈子将始终位于所有行的顶部。