Question

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

最右边的圆圈位于它的中间位置，其余的圆圈都在前面。当区域拥挤时，你再也看不到中位数了。

我甚至尝试在我的圈子的过渡中使用以下内容，但它没用：

.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

如何在D3.js中将特定元素显示在其他元素之上？

1 个答案: