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'd like to accomplish something like this: http://www.graphdracula.net/showcase/ http://live.yworks.com/yfiles-for-html/1.1/demos/DataBinding/demo.yfiles.binding.interactivegraphsource/index.html

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

Answer 1

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

Answer 2

Dagre-d3 is the best solution that I found:

https://github.com/cpettitt/dagre-d3

Answer 3

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

http://marvl.infotech.monash.edu/webcola/

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