一段时间后添加新节点时的 d3/svg 分层问题

Question

我正在构建的 d3 强制定向地图有一个烦人的问题，我最初在该地图上使用我需要的节点和链接渲染页面，然后通过 ajax 定期检查新信息。当我需要一个新节点和链接时，我会绘制它们，这很好

然而，由于 SVG 分层元素的方式，新链接在旧节点上绘制，所以我将节点作为圆圈并在它们之间画线，添加的任何新节点都会在旧节点上绘制圆圈的顶部。见下图：

我知道这在技术上不是 d3 问题，但必须有办法解决这个问题。我确实尝试删除所有圆圈并重新绘制它们，但问题是它所连接的 svg:g 节点在图层中太低，因此它仍然被绘制。

jsfiddle 上的演示 - 看下面的部分

draw() {
   ...
}

因为那是魔法发生的地方。 http://jsfiddle.net/zuzzy/uwAhy/

我使用 5 秒计时器模拟了 ajax，演示更容易。

有任何想法吗？

Answer 1

据我所知，您只能通过 SVG 元素在 DOM 中的位置来控制它的深度。

因此，可能对您有用的是创建两个组<g id='lines'>和<g id='circles'>。

当您append添加元素时，所有线条都应添加到第一组，所有圆圈应添加到第二组。

您可能必须改变添加元素的方式，但只要您确保该lines组出现在该circles组之前，那么您应该是黄金。

如果这完全不适合您的实施，我深表歉意。我遇到了一个非常类似的问题，发现对我来说唯一的解决方案是先绘制“较低”的元素。