Network multi-route orthogonal graph in d3.js

Question

We want to use d3 to draw a network route graph that has fixed start and end node but different paths in between that might share some nodes, for example:

Answer 1

I built an example using Dagre-d3, which integrates Dagre (suggested by @frank) with D3.

// Display options
var options = {
  rankdir: "LR"
};

// Create the input graph
var g = new dagreD3.graphlib.Graph()
  .setGraph(options)
  .setDefaultEdgeLabel(function() {
    return {};
  });

// Set nodes
var n_nodes = 8;
for (var i = 0; i < n_nodes; i++) {
  g.setNode(i, {
    label: i
  });
}

g.nodes().forEach(function(v) {
  var node = g.node(v);
  node.shape = "circle";
});

// Set edges
g.setEdge(0, 1);
g.setEdge(1, 2);
g.setEdge(2, 3);
g.setEdge(3, 4);
g.setEdge(4, 5);
g.setEdge(1, 1);
g.setEdge(1, 6);
g.setEdge(6, 7);
g.setEdge(7, 0);
g.setEdge(7, 4);

// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg");

// Run the renderer. This is what draws the final graph.
render(svg, g);

.node {
  pointer-events: none;
}

.node circle {
  stroke: darkgray;
  fill: lightgray;
}

.edgePath path {
  stroke: black;
}