Overlapping link labels because links share segments

I am using a LayeredDigraphLayout to show a company group structure. In some cases a subsidiary can have multiple parents like in the screenshot below where Klea Bahrain has multiple parents.

If that happens the links towards these multiple parents share segments which is totally fine, but I was wondering if there was a built in way to make sure the link labels are not on a shared segment but on the first segment that is not shared.

I am trying to build something custom for this by changing the segmentIndex, but I am having a hard time doing that because I first need the diagram to be there before I can do that because otherwise I do not know if link labels overlap on shared segments.

On your layout, I would set { setsPortSpots: false }, and on the node (actually on the element with portId, if any) I would set { fromSpot: go.Spot.BottomSide, toSpot: go.Spot.TopSide }.

That will spread out the link connection points evenly on each side.

Hi Walter,

Would that not connect the links to different ports on the node? I am actually really happy with how the links connect to the nodes now because it creates a clean layout.

I am just looking for a way to put the link labels on a segment that does not overlap with another link.

It would be easy to experiment to see if you like the design that I suggested.

For what you ask, it should be possible to assign the segmentIndex and/or segmentFraction and/or segmentOffset of the label based on how many links are connected there. You can experiment now by implementing a Node.linkConnected event handler to examine the links and decide how to set each label’s properties. I can look at it later today when I get some free time.

It looks like it is actually my mistake that the link labels overlap. I set the segmentIndex based on points in my JSON but I mistakenly also do that when I do not have any points yet and then it always puts it on -1. It seems that if in that case I just let go.js decide where to put the link labels they do not overlap.

I did try to the LinkConnected event handler which is interesting but there are not points on the link at that moment it seems, and if I do not have points yet, I also do not know how many segments the link is going to have and I cannot decide what the first non overlapping segment is.

I was actually suggesting that a linkConnected (and linkDisconnected) event handler could count the number of links coming in, and if it’s greater than zero, iterate over all of the links to set their label properties.

But if you are OK with not trying to apply any smarts, that’s good too.

That is exactly what I tried and that does work to a certain extend. I could just not get it smart enough. I might be wrong here, but I don’t think the link has a pointsCount at that moment and I would need the pointsCount to know how many segments there are and set the segmentIndex based on the number of segments.

If you tell me, I should be able to get the pointsCount there, I am definitely going to check it again to make it smarter.

You are correct – routing hasn’t been done at the time a Link is connected with a port, so one cannot depend on the Link.points list. But you can just count the number of links connected and set the label properties accordingly.

Still, this may be of low priority for you, if most of the time the mid-point labels look good.