如何在 D3.js 中使特定元素出现在其他元素之上？

Question

我在 D3 中有一个图，我先画了一些圆圈，然后画了一些椭圆来显示中位数。我的中位数有 1.5 秒的延迟，尝试在圆圈出现后绘制它，但我仍然遇到问题。

这是示例的屏幕截图：http://puu.sh/8csEK.png

最右边的圆圈位于中线后面，其余圆圈都在前面。当区域拥挤时，您就看不到中线了。

我什至尝试在我的圈子转换中使用以下内容，但没有用：

.each("end", <call function to draw ellipses>)

所以我的问题是，如何确保我的椭圆绘制在圆圈之上？ 我现在有一个绘制椭圆的函数和一个绘制圆的函数。

Answer 1

我假设您正在使用 SVG 来渲染元素。在 SVG 中，显示顺序是绘制/附加到 DOM 的顺序。也就是说，首先附加的元素绘制在后面，最后附加的元素绘制在前面。子元素（例如

g

下面的某些内容）会在绘制父元素时绘制。

为了确保元素组具有正确的顺序，通常最简单的方法是将它们添加到以正确顺序绘制的不同 SVG 组中。在代码中，这看起来像这样。

var circles = svg.append("g");
var ellipses = svg.append("g");
// ...
ellipses.append(...); // this element appears in the front although it is drawn
                      // earlier because it is appended to the group appended last
circles.append(...); // this element appears behind the one appended to ellipses

Answer 2

我不知道这个功能是什么时候添加的，但截至目前

d3

版本

7

有lower和raise。仅适用于兄弟姐妹！

const ellipses = svg.select('...');
const circles = svg.select('...');

circles.lower();
ellipses.raise();