Menu
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?
283
A directed acyclic graph (DAG) is a conceptual representation of a series of activities. The order of the activities is depicted by a graph, which is visually presented as a set of circles, each one representing an activity, some of which are connected by lines, which represent the flow from one activity to another.
A directed graph is acyclic if and only if it has a topological ordering. Adding the red edges to the blue directed acyclic graph produces another DAG, the transitive closure of the blue graph.
A directed acyclic graph (or DAG) is a digraph that has no cycles. Example of a DAG: Theorem Every finite DAG has at least one source, and at least one sink. In fact, given any vertex v, there is a path from some source to v, and a path from v to some sink.
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
132
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
