Avoiding the links not cross the node while drawing the connections

GoJS
1

Hi Walter,

I’ve the connections between nodes, and I’ve a very short gap between them. Sometimes, the connections cross over these nodes, which makes the diagram cluttered. How can I avoid these lines that should not cross the nodes?

image
image876×1024 31.3 KB

If you see the line between E-Z, it’s crossing over nodes. How can I ensure my lines should not cross other nodes?

This is my linkTemplate configuration.

this.diagram.linkTemplate = $(go.Link, {
      routing: go.Routing.Orthogonal,
      corner: 3,
      toShortLength: 3,
      selectable: true,
      selectionAdorned: false,
    })
    .bind('fromSpot')
    .bind('toSpot')
    .add(
      $(go.Shape, {
        name: 'SHAPE-LINK',
        strokeWidth: 1
      },
        new go.ThemeBinding('stroke', 'lineColor'),
        new go.Binding('strokeDashArray', 'isDotted', (isDotted) => (isDotted ? [5, 5] : null)),
        new go.Binding('strokeWidth', 'isSelected', (isSelected) => (isSelected ? 3 : 1))
      ),
      $(go.TextBlock, {
          text: '\ue9c8',
          font: '12pt inhouse-font-icon',
          cursor: 'pointer',
          background: Canvas_Colors.linkIconBgColor,
          stroke: Canvas_Colors.linkIconColorGood,
          desiredSize: new go.Size(16, 14),
          mouseEnter: (e, obj) => { this.showTooltip(e, obj); },
          mouseLeave: (e, obj) => { this.hideTooltip(e, obj); }
        },
        new go.Binding('stroke', 'status', (status) => {
          return status === 'good' ? Canvas_Colors.linkIconColorGood : status === 'average' ? Canvas_Colors.linkIconColorAverage : Canvas_Colors.linkIconColorBad;
        }),
        new go.Binding('visible', 'status', () => !!this.isResilienceEnabled),
      )
    );
2

First, set Link.routing to go.Routing.AvoidsNodes.

Second, are those nodes in Groups? If so, try setting Group.avoidable to false.

3

I tried both of the configurations, but no luck as I still see lines getting overlapped.

see the sample pic attached:

image
image1194×1244 58.7 KB

4

Have you set Group.avoidable to false on all Groups?

5

yes I used the Group.avoidable to false on all groups, but no change.

6

In reviewing your latest screenshot, which link routes are objectionable? They all seem to avoid all small nodes.

Maybe you want to avoid the gray groups? If so, make set (smaller) gray groups avoidable property to true.