Root nodes all at the top with treelayout?

GoJS
1

Hello, I’m having difficulties getting the layout I need. Basically I have multiple trees inside of a canvas. However some of those have links to other trees (“goto” nodes) are affecting the layout and make root nodes then flow with the other trees. (See screen shot below). If I manually set the goto node location and set isLayoutPositioned I get mostly what I desire.

My basic question is, without figuring out locations and building my own algorithm is there any easy way to get my desired layout of Root nodes (in green) at the Top Edge and all others with a default tree layout yet keep those goto links?

Screen Shot 2017-06-05 at 4.09.43 PM.png1309×1094 140 KB

Here is my current tree layout that got me this far.

  layout:
        this.graph(go.TreeLayout,
          {
            treeStyle: go.TreeLayout.StyleLayered,
            arrangement: go.TreeLayout.ArrangementHorizontal,
            // properties for most of the tree:
            angle: 90,
            nodeSpacing: 340,
            layerSpacing: 100,
            arrangementSpacing: new go.Size(270, 270),
            // properties for the "last parents":
            alternateAngle: 90,
            alternateLayerSpacing: 100,
            alternateAlignment: go.TreeLayout.AlignmentCenterChildren,
            alternateNodeSpacing: 270
          }),

This is the desired layout screenshot, except the misplaced “goto” nodes.

Screen Shot 2017-06-05 at 4.32.59 PM.png1571×626 159 KB

2

However some of those have links to other trees (“goto” nodes)

You can make some links not participate in the Layout. This is probably what you want.

You do this by setting isLayoutPositioned: false on those links.

One sample that does that, by using extra Link templates (you could use bindings)

3

I tried the isLayoutPositioned: false on all links and nodes around the start mode in many different combinations all without luck.

I did go through that sample and tried a few things as well.

Any other suggestions?

4

I actually got the behavior I wanted messing with layouts and drawing of the links except one thing. I’m still using a treelayout though which supposedly overrides fromSpot. I can set the properties in the data but it always get overridden from the TreeLayout. In this example the two + symbols in the “View Episode” and “Subscribe to Episode” are the ports labeled B1-3 depending on how many are there. Those ports or links to those ports I can’t seem to get set to what I want.

Is there an easy way to set those? A two way binding works if I update the debugger with the right spot but always gets set to (0.5, 1) I need (0.5, 0.5) on those side ports.

5

Figured that out too had to set setsPortSpot: false on the TreeLayout properties.

Thanks!