With D3, How Can I Avoid Svg Graph Links Being Rendered Over Nodes?

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

Solution 1:

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

Here's the gist of it:

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() ...

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.

Solution 2:

When your links are re-inserted, they appear after your root node in the DOM. This affects the visibility and the rendering order. This only happens when all links are removed then inserted. Not sure how to fix it exactly though, but a "hack" is to do it like this:

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

Then, in the updatefunction:

path.moveToBack();