javascript - 如何调整d3中图形的 "depth"？

Question

我正在使用 d3 编写动画，但我似乎无法找到一种方法来轻松确保图形始终出现在其他图形“后面”。

具体来说，我正在处理直线和圆(想象一个有向图)，有些线位于圆的顶部，而其他线位于圆的下方，看起来有点糟糕。有没有办法手动设置某些图形(在本例中是我的线条)的 z/深度？如果这看起来可以通过谷歌搜索，我深表歉意，但我尝试输入“图形深度 d3”和其他变体，但一无所获。

编辑:接受的答案有效，可以找到问题的更详细描述 here .

Answer 1

SVG 没有 z-index 属性或类似属性，元素按照它们在 DOM 中出现的顺序绘制 - 较高的元素绘制在已添加的元素后面之后。

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