How to layout tree with fan-in in d3.js?

Question

The tree layout is absolutely great... for trees. We're laying out trees with fan-in. Here are two different possible approaches I'm considering:

• "tree-ify" the DAG by arbitrarily removing edges from any children with multiple parents. Use the tree layout to decide where vertices go, then just add the edges back in. The downside of this approach is the result might not be laid out very well. For instance, it's easy to show a tree w/fan-in layout where permuting the order of sibling nodes makes its embedding planar or not.
• doing something tricky with a force-directed layout -- e.g., taking its embedding and then rotating all child nodes down (like folding a Chinese fan) so that it looks tree-like.

Does anyone have comments or advice on this problem? Either approach?

Thanks!

Answer 1

I've been working on a project to draw directed graphs in JavaScript here: https://github.com/cpettitt/dagre. It includes some examples that show how to use it with D3. You can find the demos here, which should help give you a sense of whether this approach would address your needs or not:

http://cpettitt.github.com/project/dagre/latest/demo/demo-d3.html

http://cpettitt.github.com/project/dagre/latest/demo/demo.html

http://cpettitt.github.com/project/dagre/latest/demo/demo-d3-large.html