Accepted answer

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 ="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.


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() { 
    return this.each(function() { 
        var firstChild = this.parentNode.firstChild; 
        if (firstChild) { 
            this.parentNode.insertBefore(this, firstChild); 

Then, in the updatefunction:


Related Query