How to modify links behavior in TreeLayout

GoJS
1

Dear Walter,
I created a treelayout visualization with nodes and links and I get a good result, but I would like to know how to remove two different behavior.

tree2
tree2.png1539×833 52.5 KB

In the screen I highlighted in red the behavior that I’d like to remove, some links as you can see are overlapped. How can I avoid that?

The green circle points to a node that is a self reference node, so I would like to obtain something like that
self
and not like that
selfNo
I tried to create a link template only for self reference nodes and I set fromSpot: go.Spot.BottomSide, toSpot: go.Spot.LeftRightSides without success. Is it possible to remove that behavior?

Thanks

2

I bet the TreeLayout is setting the Link.fromSpot and toSpot. If you already have a separate category/template for reflexive links, then it might be easiest to just set Part.isLayoutPositioned to false in that link template.

If you have Link.routing set to AvoidNodes, then you cannot precisely control the route, except near the ends. You will have to find and shift those overlapping link segments yourself.

3

Thanks for your reply!

Yes I used the fromSpot/toSpot in links and I set the isLayoutPositioned in template link, but nothing changed.

That is my layout:

 layout: $(go.TreeLayout, {
        angle: 90,
        nodeSpacing: 100,
        layerSpacing: 100,
        setsPortSpot: false,
        setsChildPortSpot: false,
      }),

that is the link template

     $(
        go.Link,
        {
          routing: go.Link.AvoidsNodes, 
          fromSpot: go.Spot.BottomSide,
          toSpot: go.Spot.TopSide,
          corner: 5,
          zOrder: 2,
        }, ... )

that is the reflexive link template

    $(
        go.Link,
        {
          routing: go.Link.AvoidsNodes, 
          fromSpot: go.Spot.RightSide,
          toSpot: go.Spot.BottomSide,
          isLayoutPositioned: false,
          corner: 5,
          zOrder: 2,
        },
    ...)

What do you mean with “You will have to find and shift those overlapping link segments yourself.”?

Thanks

4

Well, you don’t need routing: go.Link.AvoidsNodes for the reflexive links. I don’t know if that helps or not.

Once the links have been routed you could iterate over all of the AvoidsNodes Links and check all of the internal segments of the routes to see if any overlap. If they do, decide how to shift them apart from each other. We do this for you in the LayeredDigraphLayout for regular Orthogonal Links, but you aren’t using that layout.

5

I removed the routing, but nothing changed.

Could you please provide me a sample of iteration and shift on links of a LayeredDigraphLayout ?
Thanks

6

Well, there’s an example of overriding TreeLayout.commitLinks in extensions/ParallelLayout.js, but amusingly it is trying to put multiple link segments into a single line – the opposite of what you are trying to do.

7

Specifying “…Side” Spots doesn’t seem to be supported. But I think this does what you want:

    myDiagram.linkTemplateMap.add("REFLEXIVE",
      $(go.Link,
        {
          routing: go.Link.Orthogonal,
          fromSpot: go.Spot.Bottom,
          toSpot: go.Spot.Right,
          corner: 5
        },
        $(go.Shape, { strokeWidth: 2 }),
        $(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2})
      ));