How to make a tree org chart like in process on?

GoJS
1

Now I learn from this site: Org Chart Extras, and only got a chart like this:

Snip20220330_2
Snip20220330_21362×882 26.8 KB

But can you give a detail demo about how to make a Tree org chart like bellow?

Snip20220330_3
Snip20220330_31234×1018 26.1 KB

2

Ignoring the “extra” links in that sample, Org Chart Extras (gojs.net), if you look at how that sample is implemented you will notice what it assigns to Diagram.layout:

            layout:
              $(go.TreeLayout,
                {
                  treeStyle: go.TreeLayout.StyleLastParents,
                  arrangement: go.TreeLayout.ArrangementHorizontal,
                  // properties for most of the tree:
                  angle: 90,
                  layerSpacing: 35,
                  // properties for the "last parents":
                  alternateAngle: 0,
                  alternateLayerSpacing: 35,
                  alternateAlignment: go.TreeLayout.AlignmentStart,
                  alternateNodeIndent: 10,
                  alternateNodeIndentPastParent: 1.0,
                  alternateNodeSpacing: 10,
                  alternateLayerSpacing: 30,
                  alternateLayerSpacingParentOverlap: 1.0,
                  alternatePortSpot: new go.Spot(0.01, 1, 10, 0),
                  alternateChildPortSpot: go.Spot.Left
                }),

That is what arranges the nodes to be like this:

image
image581×650 26 KB

The appearance and behavior of the nodes depends on the node template, of course. And the appearance (and routing) and behavior of the links depends on the link template.