All geek questions in one place

Directional acyclic graph in d3.js

Is there a reliable way to draw acyclic graphs in D3.js today? I am trying to visualize the prerequisites in the curriculum, similarly to this .

I saw some older answers to similar questions, the most promising of which is this hack , although it does not work reliably with larger and more complex data sets.

Is it just a rare visualization case that the D3 is not ideal for?

+5
source share
2 answers

Perhaps you have a dagre attempt, the JS library for DAG graphs.

If you want to use d3 for any reason, check out dagre-d3

For a higher-level approach, take a look at this project using all of the libraries above.

If d3 is optional, also see other graphics libraries .;)

Update

'dagre' was discontinued in 2015, and further development by the author of this project will not be continued. However, I still think this is the best DAG in JS that you can get at the time of writing.

Use 'dagre' with the newer version of d3, it is still possible if all shift changes starting from d3 v3 are fixed on their own.

+11
source

Late, but perhaps relevant for others looking for similar information ...

Elkjs supports a multi-level graph layout and is still actively supported at this time.

Some suggested layout options based on OP 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' }

You can paste these options into this interactive editor to see how layout affects.

+1
source

Source: https://habr.com/ru/post/1205798/

More articles:


All Articles