CODEWITHSUNDEEP
javascriptd3.jsgraph-drawingdagre-d3
user1556435
user1556435

Reputation: 1056

Maintaining relative ordering when adding nodes to a layered graph in Dagre

I have created a trivial Dagre example to dynamically add nodes upon clicking existing nodes in the graph. However, the rerendering creates a different relative ordering within the same layer. Is there anyway around this problem?

Fiddle is available here: http://jsfiddle.net/gke2dann/

Thanks in advance.

// Create a new directed graph
var g = new dagreD3.Digraph();

/* populate graph... see fiddle */

var renderer = new dagreD3.Renderer();
var layout = dagre.layout();

var render = function() {
    layout.run(g);
    renderer.run(g, d3.select("svg g"));
};

render();

svg.onclick = function(evt) {
    var nodeId = evt.target.__data__;
    for (var i = 0; i <= Math.random() * 10; ++i) {
        var newNodeId = nodeId + "_sub" + i;
        g.addNode(newNodeId, { label: "Bla" });
        g.addEdge(null, newNodeId, nodeId);
    }
    render();
};

PS: Also, is there anyway to make the graph update use those fancy d3 transitions?

Upvotes: 5

Views: 2575

Answers (1)

user1556435
user1556435

Reputation: 1056

I found a solution to both my questions. By reducing the amount of iterations spent on minimizing the amount of edge crossings the ordering stays consistent and deterministic (but of course not ideal in all cases). A transition can be easily enabled by the designated function on the renderer.

var renderer = new dagreD3.Renderer();
// Disable the edge crossing minimization ordering
renderer.layout(dagre.layout().orderIters(-1));
// Enable a transition
renderer.transition(function(selection) {
    return selection.transition().duration(500);
});

Dagre is really a great library. Updated fiddle for your enjoyment available here: http://jsfiddle.net/gke2dann/1/

Upvotes: 3

Related Questions