Hi jhardy, thanks for the reply.
Crossing links occurs when having more than 40 nodes in a single group…
With real data we will have even more than 200 nodes per group.
Can you try with this amount of nodes? Thank you
To force the links to route underneath the group, you can try a custom link class like this:
"use strict";
/**
* Copyright (C) 1998-2019 by Northwoods Software Corporation. All Rights Reserved.
*/
/**
* @constructor
* @extends Link
* @class
* This custom Link class customizes its route to go around the bottom of the containing group.
*/
function UnderGroupLink() {
go.Link.call(this);
}
go.Diagram.inherit(UnderGroupLink, go.Link);
/**
* Override computePoints to route the link under the bottom of the group.
* @this {UnderGroupLink}
* @return {boolean}
*/
UnderGroupLink.prototype.computePoints = function() {
var result = go.Link.prototype.computePoints.call(this);
if (this.isOrthogonal && this.curve !== go.Link.Bezier && this.pointsCount === 6) {
this.containingGroup.ensureBounds(); // groups wait for members to measure, but we need group measured before we can adjust this link's points
this.setPoint(2, new go.Point(this.getPoint(1).x, this.containingGroup.actualBounds.bottom + 20));
this.setPoint(3, new go.Point(this.getPoint(4).x, this.containingGroup.actualBounds.bottom + 20));
}
return result;
};
And then to use it:
myDiagram.linkTemplate =
$(UnderGroupLink,
{
selectable: false,
routing: go.Link.Orthogonal,
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left
},
new go.Binding("fromEndSegmentLength", "", function (link) {
if (link.fromGroup === link.toGroup) {
return 20;
} else {
return 40;
}
}),
new go.Binding("toEndSegmentLength", "", function (link) {
if (link.fromGroup === link.toGroup) {
return 20;
} else {
return 40;
}
}),
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);