Search code examples
d3.jsdirected-acyclic-graphs

Automatic layout of DAG diagram

I need an algorithm to layout topologically sorted DAG similar to how my JSFiddle shows.

Is there any open source library that can do that? What are my options?

enter image description here

At the moment it's just a simple manual calculation of X and Y coordinates:

var nodes = [
    {label: 'A', x:     constant, y: 255, width:70, height:50 }, 
    {label: 'B', x: 2.5*constant, y: 410, width:70, height:50 },
    {label: 'C', x: 2.5*constant, y: 255, width:70, height:50 },
    {label: 'D', x: 4.0*constant, y: 255, width:70, height:50 },
    {label: 'E', x: 2.5*constant, y: 100, width:70, height:50 },
    {label: 'F', x: 4.0*constant, y: 100, width:70, height:50 }
];
Solution

  • You can do this sort of thing with d3-graphviz. There are plenty of options for styling and several different layout engines. This is pretty close to yours:

    let dotSource = `graph{
  rankdir = LR;
  node [
    style=filled;
    fillcolor=steelblue;
    fontcolor=white;
    shape=box
  ]
  A -- B;
  A -- C;
  A -- E;
  C -- D;
  C -- E;
  E -- F;
}`
d3.select("#graph").graphviz()
    .renderDot(dotSource);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-graphviz/5.0.2/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>