Network multipass orthogonal graph in d3.js

Question

We want to use d3 to plot a network route that has a fixed start and end node, but different paths between them can be shared by some nodes, for example:

I read the comments from Configure Static Graph Fixed Layouts in d3.js and successfully created a simple graph like:

But as I add more nodes to the graph, it becomes random (not static after the update), and not orthogonal:

So my questions are:

• Is it possible to use d3.js to draw something close to the desired chart?
• Or is there an algorithm that I should use in my graph?

Answer 1

Dagre solved our problem. He does exactly what we need.

Answer 2

See my demo here.

http://jsfiddle.net/doraeimo/JEcdS/

The basic idea is to create a tree-based connection.

//1)temporarily convert a connectivity to a tree var tree = conv2tree(data); //2)calculate for nodes' coords with <code>cluster.nodes(tree);</code> var nodes = buildNodes(tree); //3)append all the edges(links) of the connectivity var links = buildLinks(data);