How to Arrange Nodes from Top to Bottom with TreeLayout

GoJS
1

Hello, I am currently implementing diagram using GoJS version 2.3.12.

I have a question regarding the layout while implementing a tree layout using the following code:

const verticalLayout = $(go.TreeLayout, {
    angle: 90,
    layerSpacing: 40,
    alternateNodeIndent: 40,
    setsPortSpot: false,
    setsChildPortSpot: false,
    isInitial: false,
    isOngoing: false
});

However, the layout is arranged in a way similar to the diagram below, which is different from what I expected.

actual

The expected layout result is something like the diagram below.

expected

What parameters should I set so that the arrows of the nodes are hierarchically arranged from top to bottom? With the current parameter settings, Node1 and Node3 are placed lower and the direction of the nodes are not placed top-to-bottom.

Thank you for your assistance.

2

Your graph is not tree-structured, so it is not surprising that TreeLayout isn’t producing the results that you would like.

Instead, use LayeredDigraphLayout.

  new go.LayeredDigraphLayout({
    direction: 90,
    alignOption: go.LayeredDigraphLayout.AlignAll,
    setsPortSpots: false,
    isInitial: false,
    isOngoing: false
  })
3

I tried LayeredDigraphLayout and got the expected result.
Thank you for your precise answer.