Graph with auto layout using d3 (a tree with multiple parent nodes)

Question

How to draw a graph with auto layout, many-to-many with lines not crossing the boxes using d3?

I guess that's the best description of what I need (something like tree, but with multiple parents): enter image description here

D3 doesn't implement a layout for this. – Lars Kotthoff Apr 02 '14 at 17:15 — Lars Kotthoff, Apr 02 '14 at 17:15

score 7 · Accepted Answer · answered Apr 03 '14 at 07:22

7

Dagre-d3 is the best solution that I found:

answered Apr 03 '14 at 07:22

El Kopyto

1

This library is deprecated. Is there any replacement? – Damiaan Dufaux Aug 06 '21 at 12:35

score 4 · Answer 2 · answered Aug 15 '14 at 01:58

4

For anyone else who comes across this, here's another possible solution: (see the "Directed Graph with downward-pointing edges" example)

It can also be plugged into d3.js and used in place of the force layout.

answered Aug 15 '14 at 01:58

patorjk

Agreed, but be aware of [WebCola Missing documentation](https://stackoverflow.com/questions/33889372/webcola-missing-documentation) – Mawg says reinstate Monica Jan 22 '21 at 19:13

score 2 · Answer 3 · answered Apr 26 '14 at 14:21

2

To minimize line crossings, you probably need a layered digraph layout. Just google that phrase.

answered Apr 26 '14 at 14:21

Fuzzy

As stated above, Dagre-d3 is the best solutions – El Kopyto Apr 27 '14 at 07:33
@ElKopyto This library is deprecated. Is there any replacement? – Damiaan Dufaux Aug 06 '21 at 12:35

3 Answers3