Show different levels with Tree layout

GoJS
1

Hello Walter,

How can we add these lines to show different levels in tree layout?
image
just need to add these lines in the below hierarchy tree.
I am using this layout
layout: $(go.TreeLayout, {
alignment: go.TreeLayout.AlignmentStart,
angle: 0,
compaction: go.TreeLayout.CompactionNone,
layerSpacing: 24,
layerSpacingParentOverlap: 1,
nodeIndent: 2.0,
nodeIndentPastParent: 1.0,
nodeSpacing: 8,
setsPortSpot: true,
rowSpacing: 8,
setsChildPortSpot: true,
}),
image

2

I assume you started from the Tree View sample; GoJS Tree View

If you look at the code there, you will see that the link template is basically empty:

      // without lines
      myDiagram.linkTemplate = $(go.Link);

That is why the sample does not show any lines/links.

But notice the commented-out lines just below that:

      // // with lines
      // myDiagram.linkTemplate =
      //   $(go.Link,
      //     { selectable: false,
      //       routing: go.Link.Orthogonal,
      //       fromEndSegmentLength: 4,
      //       toEndSegmentLength: 4,
      //       fromSpot: new go.Spot(0.001, 1, 7, 0),
      //       toSpot: go.Spot.Left },
      //     $(go.Shape,
      //       { stroke: 'gray', strokeDashArray: [1,2] }));

You could try using that link template definition instead.

Finally, the third option is to have lines that are only vertical, without a horizontal segment. This is demonstrated at: Tree View With Vertical Lines