如何调整d3中图形的"depth"？
How do I adjust the "depth" of graphics in d3?
我正在使用 d3 编写动画，我似乎无法找到一种方法来轻松确保一个图形始终出现 "behind" 其他图形。
具体来说，我正在处理直线和圆（想象一个有向图），有些直线在圆的顶部，有些在圆的下面，这看起来有点糟糕。有没有办法手动设置某些图形的 z/depth，在本例中是我的线条？如果这看起来 google-able，我深表歉意，但我尝试输入 "graphic depth d3" 和其他变体但一无所获。
编辑：已接受的答案有效，可以找到更详细的问题描述 here。
SVG 没有 z-index 属性 或类似的元素，元素按照它们在 DOM 中出现的顺序绘制——较高的元素在后面绘制之后添加的元素。
将元素分组到图层中的最简单方法是使用 g 元素。因此，在您的示例中，我将使用两个 g 组，一组用于线条，一组用于圆圈。首先为行添加 g ，然后为它下面的所有行添加。如果您随后将圆圈添加到您之后添加的第二个 g，则所有圆圈将始终位于所有行的顶部。
我正在使用 d3 编写动画，我似乎无法找到一种方法来轻松确保一个图形始终出现 "behind" 其他图形。
具体来说，我正在处理直线和圆（想象一个有向图），有些直线在圆的顶部，有些在圆的下面，这看起来有点糟糕。有没有办法手动设置某些图形的 z/depth，在本例中是我的线条？如果这看起来 google-able，我深表歉意，但我尝试输入 "graphic depth d3" 和其他变体但一无所获。
编辑：已接受的答案有效，可以找到更详细的问题描述 here。
SVG 没有 z-index 属性 或类似的元素，元素按照它们在 DOM 中出现的顺序绘制——较高的元素在后面绘制之后添加的元素。
将元素分组到图层中的最简单方法是使用 g 元素。因此，在您的示例中，我将使用两个 g 组，一组用于线条，一组用于圆圈。首先为行添加 g ，然后为它下面的所有行添加。如果您随后将圆圈添加到您之后添加的第二个 g，则所有圆圈将始终位于所有行的顶部。