How to limit the horizontal width of a complex/large tree diagram?

GoJS
1

image 1
image 11380×785 49.8 KB

Hi there, we are currently exploring possibilities for rendering very large org charts.

When there are a lot of nodes with no parents or one parent contains a lot of children the diagram becomes hard to use because it blows up horizontally which requires a lot of scrolling to navigate.

We’ve played with the breadthLimit API which has been useful but doesn’t quite seem to fix the problem entirely. (It also doesn’t apply to root nodes)

Are there any good examples or ideas to make the user experience sufficiently enjoyable for large tree diagrams? (Some nodes may have 200 children and some may only have 0/1 children)

2

You may get better results using LayeredDiagraphLayout instead of TreeLayout, and trying the different compaction options, but its hard to be sure.

One thing to note is that your nodes are wider than they are long, and your screen space (at least in the screenshot) is too. This suggests that your graph may look more compact if it flowed from left to right, rather than from top to bottom. Or you may want to redesign your node to be taller rather than wider.