Link labels overlapping Tree nodes

GoJS
1

Hi,
I have assigned labels to links as can be seen in the image below. This problem I am facing is that these labels are overlapping the pink nodes. How can this overlapping be avoided? Can it be avoided by assigning sufficient length to the links?

Label definition:

$(go.TextBlock,
<span =“Apple-tab-span” style=“white-space:pre”> { segmentIndex: -1,
<span =“Apple-tab-span” style=“white-space:pre”> // segmentFraction: 0.5,
<span =“Apple-tab-span” style=“white-space:pre”> segmentOffset: new go.Point(0, -4),
<span =“Apple-tab-span” style=“white-space:pre”> segmentOrientation: go.Link.OrientUpright
},
<span =“Apple-tab-span” style=“white-space:pre”> new go.Binding(“text”, “branchCondition”))

2

Instead of setting segmentOffset, try setting alignmentFocus: go.Spot.BottomRight.

You probably don’t need to set segmentOrientation, if your example graph is representative of all uses.

3

“alignmentFocus: go.Spot.BottomRight” setting worked but the link label is now overlapping the link.
I here want to assign appropriate length to the last segment of the link to accommodate its label.
Is it possible?

4

Well, if those labels are always on links coming from split nodes, and if there are only two of them, I suppose you could always use alignmentFocus: go.Spot.TopRight for those link labels connecting with the lower of the two nodes.

One way to implement that is to override your layout’s commitLinks() method to first call the base method and then to find all of those link labels and switch their alignmentFocus.

A completely different approach would be to not use link labels but put that text into the node. That way the node would always be considered to be as wide as it needs, so the layout will always have room for those labels. You can have the node include a line underneath the text so that the link appears to continue all the way to the pink rounded rectangle. The Mind Map sample does something very similar in order to make it look like a continuous line running through the node.

5

Hi,
alignmentFocus: go.Spot.BottomRight works for small labels but not for the lengthy ones, when the labels are long, the customized Parallel layout breaks as it is not able to accommodate the label length. Is it possible to fix parallel layout to accommodate for long labels.


Parallel layout breaks:
I also tried to implement labels as nodes as in mind map example, it works but the problem with that is, it breaks a link into three components and then needs extra programming to make all three components behave like one, for example if a link connecting to a label node is selected then the label node and the link going out of it also should be selected.


It would be really nice if labels in gojs works without this kind of extra programming.





6

As one starts adding more and more requirements, there has to be code somewhere that implements those features. If GoJS doesn’t support it already, you have to implement it in your own code.

In this case, maybe you need to specify the alignmentFocus before calling the base commitLinks method, not afterwards.