Directed, acyclic graph in d3.js

d3.js visualization data-visualization directed-acyclic-graphs
Chris Fritz picture Chris Fritz · Oct 29, 2014 · Viewed 15.3k times · Source

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

MarcoL picture MarcoL · Oct 29, 2014

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

Related questions

How to access the DOM element that correlates to a D3 SVG object?

I'm trying to learn D3 by experimenting with one of their basic bubblecharts. First task: figure out how to drag an bubble and have it become the topmost object while it's being dragged. (The problem is getting D3's object …

Read More
How can I bring a circle to the front with d3?

First of all, I am using d3.js to display different sized circles in arrays. On mouse over, I want the circle being moused over to become bigger, which I can do, but I have no idea how to bring …

Read More
Draw simple timeline with D3

This is what I'm trying to accomplish: In this example, I have a starting date (1º Jun 2011), an ending date (1º Jul 2012) and multiple events between this range. Each event is related to one day of the calendar (although it is possible …

Read More