dagre-d3 flowchart

dagre-d3 flowchart

by bilbobaggins

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.4/dagre-d3.min.js"></script>
<svg width="1000" height="1000">
    <g></g>
</svg>

CSS

body {
  font: 300 14px 'Helvetica Neue', Helvetica;
}

.node rect {
  stroke: #333;
  fill: #fff;
  cursor: pointer;
  border-radius: 5px;
}

.edgePath path {
  stroke: #333;
  fill: #333;
  stroke-width: 2.5px;
  cursor: pointer;
}

JavaScript

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

// function to shuffle the list...
function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i -= 1) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
    return a;
}

var nodes = [ "10007154_1100", "148570017_1100", "148570018_1100", "148570019_1100",
               "148570025_1100", "148570010_1100", "148570021_1100", "148570020_1100",
               "148570026_1100", "148570011_1100", "148570022_1100", "148570010_1200",               "148570020_1200", "148570026_1200", "148570023_1100", "148570011_1200",
               "148570023_1200"
               
            ];

// collect edges to a list
var edgeList = [["148570017_1100","148570018_1100",{"label":""}],["148570018_1100","148570019_1100",{"label":""}],["10007154_1100","148570017_1100",{"label":""}],["148570018_1100","148570025_1100",{"label":""}],["148570019_1100","148570020_1100",{"label":""}],["148570019_1100","148570021_1100",{"label":""}],["148570019_1100","148570010_1100",{"label":""}],["148570025_1100","148570010_1100",{"label":""}],["148570025_1100","148570026_1100",{"label":""}],["148570021_1100","148570022_1100",{"label":""}],["148570010_1100","148570011_1100",{"label":""}],["148570010_1100","148570010_1200",{"label":""}],["148570020_1100","148570020_1200",{"label":""}],["148570026_1100","148570026_1200",{"label":""}],["148570026_1200","148570011_1200",{"label":""}],["148570010_1200","148570011_1200",{"label":""}],["148570022_1100","148570023_1100",{"label":""}],["148570023_1100","148570023_1200",{"label":""}]];

// Automatically label each of the nodes


var svg = d3.select("svg"),
    inner = svg.select("g");

function render_graph(render) {

  var max_cnt = 100; // try 100 times, if optimal not found, give up
  var iter_cnt = 0;
  var optimalArray, best_result;
  while(max_cnt--) {
      var g = new dagreD3.graphlib.Graph().setGraph({});
   ...