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

Question

在页面加载时，我的 D3 图形可视化看起来像预期的那样:

但是，在单击根节点折叠所有连接，然后再次单击展开它们之后，到根的链接会出现在根节点的顶部。

我该如何解决这个问题？

这只发生在根节点上。

我的代码很长，所以 you can find it here .

Answer 1

创建两个SVG groups ( <g> )充当层，并将您的节点和链接保持在不同的层中。

这是它的要点:

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 树时更容易理解。