How to avoid overlapping links

#1

Hi. I need to create a graph where there is a sequence of nodes 10, 20, 30, 40, 50 and each node depends on all predecessors. For example node 10 is a predecessor for 20, 30, 40 and 50. 20 is a predecessor for 30, 40 and 50. And so on. The result is shown in the picture. The dependency chain is shown correctly but because all links overlap the diagram is not readable.
I am currently using a TreeLayout and an AvoidsNodes routing, which works well in most cases but seems to fail here. I’ve been trying other layouts and routings as well, but could not get better results. (Best was a CircularLayout with normal links, the diagram is then readable in a graphical sense but the flow of the dependency chain is lost.)
My question is: is there some setting to make links avoid other links as well as nodes?
Or as an alternative: could you recommend some settings to render this diagram correctly?

Thanks,
Alessandro

GoJsTasks.png742×191 8.32 KB

#2

There are some different things you could try:

  1. Try using a LayeredDigraphLayout since you have links that span multiple layers.
  2. Continue using a TreeLayout, but set TreeLayout.alignment to go.TreeLayout.AlignmentStart and TreeLayout.nodeIndent to a non-zero value.

If neither of these looks acceptable, you may need to do some custom link routing, either with overrides of Link methods or special routing in TreeLayout.commitLinks.

#3

Hi,
thanks for the information. I’ve tried the LayeredDigraphLayout and the result is somewhat an improvement but still not enough readable. The nodeIndent suggestion worked better for this particular graph, then we found that it’s quite graph-dependent and may look better or worse from case to case.
We’re now testing the following, it’s been giving readable graphs so far:

layoutParams = { angle: 0, treeStyle: go.TreeLayout.StyleAlternating, alternateAlignment: go.TreeLayout.AlignmentBottomRightBus, isRealtime: false };

#4

Hi ascotti,

I am facing the same problem of link overlapping. I have used LayeredDiagramLayout and AvoidsNodes constant for LinkTemplate. In diagram Links are avoiding nodes, but links are overlapping other links on some places in diagram.
Did you find any setting to make links avoid other links as well as nodes ?.

Thanks
Ghosh

#5

You can try setting the fromSpot/toSpot on your node template to go.Spot.AllSides to see if that helps. Depending on how much overlapping you’re seeing, you may need to use custom link routing.