使用D3，如何避免在节点上渲染SVG图形链接? [英] With D3, how can I avoid SVG graph links being rendered over nodes?

问题描述

在页面加载时，我的D3图形可视化效果如下所示:

On page load, my D3 graph visualization looks like this, as expected:

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

However, after clicking the root node to collapse all connections, then clicking it again to expand them, the links to the root appear on top of the root node.

我该如何解决?

这仅在根节点上发生.

我的代码很长，所以您可以在这里找到它.

推荐答案

创建两个 SVG组(<g>)充当层，并将节点和链接保留在不同的层中.

Create two SVG groups (<g>) to act as layers, and keep your nodes and links in different layers.

这是要点:

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树时更易于理解.

This saves cycles compared to shuffling elements to the back on every new entry, is more robust, and is easier to understand when inspecting the DOM tree.

这篇关于使用D3，如何避免在节点上渲染SVG图形链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！