13

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?

Chris Fritz
  • 1,922
  • 1
  • 19
  • 23

2 Answers2

26

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

bumbeishvili
  • 1,342
  • 14
  • 27
MarcoL
  • 9,829
  • 3
  • 37
  • 50
  • I haven seen dagre, but D3 is being used elsewhere in the project and I very much enjoy the power it brings, so I'm trying to avoid adding yet another visualization library unless absolutely necessary. The fact that dagre-d3 is larger than the complete d3 library also doesn't make me super happy. – Chris Fritz Oct 29 '14 at 22:19
  • I see. `dagre-d3` includes also `lo-dash` so maybe that's the reason of the size. `dagre` itself works as layout module and you could find your way to use it with `d3` - it is the best open source hierarchical/dag layout out there IMHO. – MarcoL Oct 30 '14 at 09:27
  • @MarcoL dagre seems to be abandoned `This project is not being actively developed or maintained.` Dagre is also build with d3 v3. Is there a d3 v4 alternative arouns? – Tucker Dec 13 '16 at 03:01
  • I've updated the answer. TBH I think it is still worth using dagre-d3 forking it and using the newer version of d3. – MarcoL Dec 13 '16 at 07:47
  • @Tucker/everyone - [dagre](https://github.com/dagrejs/dagre) is up and running again, and now supports d3 v4/v5 – Sphinxxx Aug 16 '18 at 21:33
  • dagre is a good suggestion for you guys. – ductridev Jun 08 '22 at 12:33
4

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.

DanM
  • 103
  • 6
  • 1
    Big problem of elkjs is that it is using sprotty instead of d3 and there is no simple example of "copy-paste this to try it in your environment". But I used predecessor of elkjs - klayjs and it is working fine. It has simple example and it has klayjs-d3 bridge. – NtsDK Mar 25 '18 at 23:10
  • 2
    elkjs uses neither sprotty nor D3. It's just a layout library. You have you take care of the rendering yourself by choosing a rending library (e.g. sprotty, D3, etc.) – Miro Spönemann Apr 20 '18 at 07:03
  • 1
    I'll add that elkjs is probably one of the best workflow-esque layout engines. – amcdnl Mar 09 '20 at 20:44
  • I built a project on elkjs for react - https://reaflow.io that you might find interesting. – amcdnl Feb 10 '21 at 12:17