Javascript 使用D3，如何避免SVG图形链接在节点上呈现？

页面加载时，我的D3图形可视化如预期所示：

但是，在单击根节点以折叠所有连接，然后再次单击以展开它们之后，指向根节点的链接将显示在根节点的顶部

我怎样才能解决这个问题

这只发生在根节点上

---

我的代码相当长，因此。

重新插入链接时，它们会出现在DOM中的根节点之后。这会影响可见性和渲染顺序。只有在删除所有链接后再插入链接时，才会发生这种情况。虽然不确定如何准确修复，但“黑客”就是这样做的：

d3.selection.prototype.moveToBack = function() { 
    return this.each(function() { 
        var firstChild = this.parentNode.firstChild; 
        if (firstChild) { 
            this.parentNode.insertBefore(this, firstChild); 
        } 
    }); 
};

然后，在

更新
功能中：

path.moveToBack();

创建两个作为层，并将节点和链接保留在不同的层中

以下是它的要点：

var vis = d3.select("body").append("svg"); // Visualisation root

// Append layers in desired draw order; these groups are permanent elements.
var linksLayer = vis.append("g").attr("id", "links-layer");
var nodesLayer = vis.append("g").attr("id", "nodes-layer");

...

// Inside the layer-groups, shuffle nodes around as needed based on data.

var nodes = nodesLayer.selectAll(".node").data(nodeData);
nodes.enter() ...

var links = linksLayer.selectAll(".link").data(linkData);
links.enter() ...

与在每个新条目上将元素拖到后面相比，这节省了周期，更健壮，并且在检查DOM树时更容易理解