Irregular behavior of edges visualization

GoJS
1

There is an irregularity in the way “edges” between the “nodes” are getting visualized.

With fewer number of nodes, say, 10-15, edges are clearly visible the way it should, aligned orthogonally and not overlapping with nodes.

But, when there are larger number of nodes, say, 30 or more, the visualization is ugly. Though maintaining the orthogonality, but overlapping with the nodes, like this:

image.png1080×518 34.7 KB

How this overlapping of edges on nodes can be avoided?

Thanks.

2

I suspect that the nodes are too close to each other, not leaving enough room for the links to be routed without overlapping nodes. Try increasing the space between nodes.

Also, are you using Groups? Have you set avoidable to false on the Groups?

3

Yes, i’m using groups and avoidable is set to false.

How can the space between nodes be increased?

4

I don’t know what layout you are using.

5

Are columnSpacing and linkSpacing enough for handling the spacing?

Group template (including layout) looks something like this:

 myDiagram.groupTemplate = $(
	go.Group,
	"Horizontal",
	{
		selectionObjectName : "SHAPE",
		resizable : true,
		resizeObjectName : "SHAPE",
		selectionAdorned : false,

		layout : $(
				go.LayeredDigraphLayout, // automatically layout the lane's subgraph
				{
					isInitial : false,
					isOngoing : false,
					direction : 90,
					columnSpacing : 20,
					setsPortSpots : false,
					packOption : go.LayeredDigraphLayout.PackStraighten,
					aggressiveOption : go.LayeredDigraphLayout.AggressiveMore,
					layeringOption : go.LayeredDigraphLayout.LayerLongestPathSink,
					linkSpacing : 50
				})
	});
6

For LayeredDigraphLayout layerSpacing controls the distance between layers.

linkSpacing controls the distance between segments of links in the same layer, for those links that are routed by the layout. I don’t remember exactly, but I think that links with AvoidsNodes routing are not routed by the layout.

7

Yes, AvoidsNodes is used with links. I have used it like this:

myDiagram.linkTemplate = $(go.Link, {
				routing : go.Link.AvoidsNodes,
                                ...
                           });