Force layout to draw links with aligned/smooth interceptions


I’m wondering is there a way to handle links interceptions to be aligned with each other?
Something like that

I’m a bit overwhelmed with how much things implicitly affect how links are drawn.

I’m using LayeredDigraphLayout with Link.routing = AvoidsNodes

Is there the way to control how the link path breaks?
I would like to have them collapsed into single line for same layer.

What have you specified as the fromSpot and toSpot? I’m guessing that you did tell the layout that LayeredDigraphLayout.setsPortSpots should be false, although I’m not sure why you did.

yes, from&to spots are described for each node
yes, in layout i set setsPortSpots to false.

But what are those Spot values? I would think you could just use the default values that LayeredDigraphLayout uses, which for a direction of 90 would be { fromSpot: go.Spot.Bottom, toSpot: go.Spot.Top }. In other words, you wouldn’t have to set any fromSpot or toSpot or LayeredDigraphLayout.setsPortSpots.

Anyway, if you have specified those spots, I do not understand why the links were routed the way that they were.

For those cases where the link crosses over a layer and the link has routing Link.AvoidsNodes, yes, the turn (i.e. the vertical position of the horizontal segment) will be different than for those links that connect nodes in adjacent layers. I think we have some code that implements what I think you want, but I’ll have to look for it.

I’m using TopCenter & BottomCenter for spots, since as you notice i’m in direction: 90

I think that issue is somehow related to groups.
First screenshot i believe no longer relevant since it was related to incorrect diagram.layoutDiagram() call.
Now its much better:

But issue starts now when I expand group node:

Is there a chance that this behavior related to thing that we dont link groupNode, and replacing into/outOf links of groupNode with links to the content nodes (and form them to outside of the group next relative node) You can see it in the screenshot above.

WDYT Walter?

So expanding or collapsing groups is causing links to be added and removed? That might not be necessary if the (hidden due to collapsed subgraph) member nodes exist and have links connected with them. When a link connects with a node that is not visible due to a containing Group being collapsed or due to a tree-parent node being collapsed, then the link is routed to the default port of the visible collapsed group or visible collapsed tree parent node.

My other question now is: what is your Group.layout? One possibility is to set that to null.

Yes, I add/remove links on group expand/collapse.

here is Group layout.

			layout: goMake(go.LayeredDigraphLayout, {
				direction: 90,
				layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,

I set it to null and now its almost perfect.

I think thats the reason, why the link which goes inside group runs from general line

What is it that you are drawing in red in your last screenshot? Is there actually a Link going horizontally where you drew that horizontal red line? And what does that small red rectangle highlight?

I drew a line (which goes under Search Model title) and mark with a rectangle on the right side difference of link path between nodes which supposed to be on the same level, so I assume that was caused this split of link in interception which i marked with a line with arrowhead

So you are saying that the difference in vertical positioning of those two links’ horizontal segments is due to half of the difference in the Y positions of the two nodes. Yes, that is correct. One can override one of the Link methods that are used to compute the route, in order to have them all turn at the same Y point independent of the Y position of the Link.toNode.