d3.js, collapsible tree - how to connect different

Question

So I am using http://bl.ocks.org/mbostock/4339083 to create a collapsible tree and it works great.

Now the thing is I have some nodes which have the same children, so I want to know if there is any way to visualize the graph in such a way that both the parents expand to the same child?

So basically when you expand the node of a parent it should automatically expand the node of the other parent leading to the same common child, is this possible with any graph?

Answer 1

From your description, I gather you need to visualize directed acyclic graph, or DAG.

Tree is:

A
|\
B C
 / \
D   E

DAG is:

A
|\
B C
 \|
  D

And, no, unfortunately, D3 tree and cluster layouts simply don't support that kind of graphs. Their internal algorithms assume that the data structure is strictly a tree.

However, there are some options. Please see these five related questions for possible approaches:

d3 tree - parents having same children

How to layout a non-tree hierarchy with D3

d3.js tree nodes with same parents

Layered graphs in d3.js

JS library for displaying direct acyclic graphs (DAGs)