How to Better Avoid Nodes in Group

GoJS
1

image.png1176×1472 131 KB

hey walter,

any idea how to make this look better? link properties are:
curve: go.Link.Bezier,
fromEndSegmentLength: 30,
toEndSegmentLength: 30

adding Link.avoidsNodes does an extremely worse thing with tons of link back-bending and extra curves. huge mess.

i suppose trying to align the order of the ports and the nodes might help reduce crossover. is there a better way?

2

Based on the way your nodes are laid out within the group, it won’t be easy to avoid crossings. If you remove the curve and the end segment lengths, AvoidsNodes routing can do a better job, but I don’t know if that style works for you.

It’s hard to quantify what would look better, that’s really up to you. The best course of action might be as you suggested, which is just ordering the ports/nodes to avoid as many crossings as possible.

3

huh. walter must be on vacation.

the nodes can be laid out any way that makes it look better. i was wondering if there’s a way to make a link go through a certain point (such as the left side of the group). then within the group maybe a force-directed layout to position the nodes within the group to try to make the links fan out from there. is that possible?

4

Here’s a comparer you can use for your group template comparer that will sort group members based on the y value of the fromPort:

function sortGroupNodes(pa, pb) {
  if (pa instanceof go.Node && pb instanceof go.Node) {
    var intoA = pa.findLinksInto().first();
    var yFromPortA = 9999;
    if (intoA) {
      yFromPortA = intoA.fromPort.getDocumentPoint(go.Spot.Center).y;
    }
    var intoB = pb.findLinksInto().first();
    var yFromPortB = 9999;
    if (intoB) {
      yFromPortB = intoB.fromPort.getDocumentPoint(go.Spot.Center).y;
    }
    return yFromPortA - yFromPortB;
  }
  return 0;
}

Another thing you could do to improve the way it looks is to set layerName on your nodes to “Foreground”.

Using some sort of custom link routing would be much more expensive.