Gojs layout for large cyclic graphs

GoJS
1

Hi,
I have a gojs diagram with a lot of nodes (~100) and links. The diagram represents a cyclic graph. Issue is that the links go over the node or come close to each other a lot of times which we do not want. Any suggestions on the gojs link/nodes/layout configuration for this case?

2

Could you please tell us what you have tried and show us how it isn’t working the way that you want?

3

@walter I am using the layout config:
$(go.LayeredDigraphLayout, {
columnSpacing: 30,
linkSpacing: 10,
direction: 90,
setsPortSpots: false,
}
For links:
{routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver}

Attaching a GIF of how the links almost overlap with each other as well as the nodes:
large_graph_for_forum

4

I think you need to increase the value of the LayeredDigraphLayout.layerSpacing property so that there is enough room for the links between the layers.

5

Is there a way to automatically adjust the spacings based on the complexity of the diagram? Because having a large spacing might not look great for small diagrams.

Also, is there a way to make sure that the links do not overlap? In the image below, some links seems to be distant and some seem to be overlapping.

image
image859×326 5.78 KB

I tried using the linkSpacing field, but it doesn’t seem to work consistently.

image
image806×610 13.9 KB

6

I believe the layout can be customized, either to use a uniform layerSpacing that is big enough, or to have a different spacing between each pair of layers depending on how many links there are there. Which behavior do you want?

7

I would prefer the latter.

9

Any suggestions related to this?

10

Since you have set LayeredDigraphLayout.linkSpacing to 10, I cannot explain the upper results that you highlight. But the lower highlighted results look correct to me.

I think things would look better without the setting of Link.curve to JumpOver.

11

For the 2nd image, I had set the linkSpacing=100.

Yes, I had used curve=Bezier and graph looks much better now.

image
image1086×636 18.6 KB

I have couple of questions though:

  1. The arrowheads are always vertical and do not align with the angle of the link. I tried the suggestion mentioned here and it doesn’t seem to work.

    image
    image1079×348 17.8 KB

  2. There is some inconsistency in the link spot. Although there is a gap for a link to join, the link weirdly connect to another spot where another link is already present. I am using topSpot: go.Spot.TopSide
    image

Do you have any suggestions on how to fix the above 2 work? I am using the below configurations:
Link configuration: {curve: go.Link.Bezier, cursor: 'pointer', curviness: 10}
Node configuration: {toEndSegmentLength: 100, fromEndSegmentLength: 100}

12

At the link point (i.e. at the end of the route), the angle of the curve really is 90 (vertical). The problem that you see is that the curve is so sharply turned to the side that the farther away it is from the end point the farther away it is from the mid-line of the arrowhead.

You might be interested in this forum topic: Arrowhead bug?
Of course you’ll need to adapt the code for your vertically oriented links, rather than the horizontal ones that topic was discussing.

The behavior in your #2 seems very odd. Is there any way I can reproduce that behavior?