我正在使用 d3 编写动画,但我似乎无法找到一种方法来轻松确保图形始终出现在其他图形“后面”。
具体来说,我正在处理直线和圆(想象一个有向图),有些线位于圆的顶部,而其他线位于圆的下方,看起来有点糟糕。有没有办法手动设置某些图形(在本例中是我的线条)的 z/深度?如果这看起来可以通过谷歌搜索,我深表歉意,但我尝试输入“图形深度 d3”和其他变体,但一无所获。
编辑:接受的答案有效,可以找到问题的更详细描述 here .
最佳答案
SVG 没有 z-index
属性或类似属性,元素按照它们在 DOM 中出现的顺序绘制 - 较高的元素绘制在已添加的元素后面之后。
将元素分组到图层中的最简单方法是使用 g
元素。因此,在您的示例中,我将使用两个 g
组,一组用于线条,一组用于圆圈。首先为各行添加 g
,然后为其下方的所有行添加。如果您随后将圆圈添加到随后添加的第二个 g
中,则所有圆圈将始终位于所有行的顶部。
关于javascript - 如何调整d3中图形的 "depth"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29780779/