使用D3表示树布局

Question

I'm trying to use D3 to create a tree layout. I want to modify the standard d3 tree layout to represent a tree layout like following. In my layout, some of the child nodes can be converged into one node. It is the only difference between that layout and the standard tree layout.

     A
   /   \
  B     C
 /\ \   
D  E F
|  | |
G  H L
 \ // 
  J
  |
  K

In the above layout B node has 3 children(D,E,F) and each has one child node (G,H,L) and those 3 children again converge into one node (J).

I can use a javascript library other than D3 also.

Answer 1

The right way would be to use d3.layout.force instead of d3.layout.tree.

However, if you want a tree layout solution, you might want to check out http://bl.ocks.org/robschmuecker/6afc2ecb05b191359862

Answer 2

I had a big long answer, but just if anyone actually searches this question here. D3-Dagre