Directed, acyclic graph in d3.js

Question

Is there a reliable way of drawing directed, acyclic graphs in D3.js today? I'm trying to visualize prerequisites in a curriculum, similar to this.

I've seen some older answers to similar questions with the most promising lead being this hack, though it doesn't work reliably well with larger and more complex data sets.

Is this simply a rare case of a visualization that D3 is not ideal for?

Answer 1

You may have a try to dagre, a JS library for DAG graphs.

If you want to use d3 for whatever reason, have a look at dagre-d3

For a more high-level approach have a look at this project using all the libs above.

If d3 is not mandatory have also a look at others graphs library. ;)

Update for September 2018

There is a new library , called d3-dag

Answer 2

Way late but perhaps relevant to others searching for similar information...

Elkjs supports layered graph layout and appears to still be actively maintained at this time.

Some suggested layout options based on the OP's usecase...

layoutOptions: {
        'org.eclipse.elk.algorithm': 'layered',
        'org.eclipse.elk.direction' : 'DOWN',
        'org.eclipse.elk.edgeRouting': 'SPLINES',
        'org.eclipse.elk.layered.edgeRouting.sloppySplineRouting': false,
        'org.eclipse.elk.layered.layering.strategy': 'INTERACTIVE' }

These options can be pasted into this interactive editor to see how the layout is affected.