5

I am using d3-flow-tree (here) for displaying my tree's node as flow layout. And add other g -element to represent connection between two nodes (by managing other chart with flow -layout).

When drawing links from one node to other it's must be rectangular path that not intersect other node like attached image enter image description here

need to find possible available path. any suggestion and ideas are welcome.

Thanks in advance

Amit Rana
  • 1,117
  • 1
  • 10
  • 32
  • Can you give more specifics about how you plan to implement this: your drawing doesn't look much like the collapsible tree layout you linked to. – AmeliaBR Feb 08 '14 at 18:58
  • In tree there is one root I am hiding root and start from the child of root so this all are child of root and they are in flow... I am not displaying inner nodes they are collapsible – Amit Rana Feb 10 '14 at 05:43
  • But in the layout you linked to, all the children of the root would be displayed on separate rows. Are your N:1 to N:6 sibling elements (children of the root node) or are some of them children of each other? – AmeliaBR Feb 10 '14 at 15:44
  • N:1 N:2 .. are child of root ... They also have sibling child but that will behave like stacks in example chart ,This view is only for child of root node and the links are connection between two child of root node – Amit Rana Feb 11 '14 at 07:41
  • Well, if I was trying to do it, I wouldn't worry about trying to snake the links down in between children, since that would confuse the tree layout. I'd just always go the the left, along the edge of the graph. Then the only change you have to make to the node layout is to make a larger left margin. Whether you do it that way or not, why don't you put together a working example of your flow chart with links, and come back and edit your question with it. That way people will be able to make more specific suggestions about how you can fix any remaining problems. – AmeliaBR Feb 11 '14 at 15:49

1 Answers1

1

It looks WebCola can do that. You can take a look at their demo: https://ialab.it.monash.edu/webcola/examples/unix.html

there the author mentioned: "Another feature of this example is shortest-path edge routing. That is, after layout stops, the edge paths are routed to avoid passing through node boundaries." and he also explained how it is achieved.

Jacob Wu
  • 868
  • 9
  • 11