value driver tree

by Kevin McIsaac

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.16/go-debug.js"></script>
<div id="sample">
   <div id="myOverviewDiv"></div>
   <div id="myDiagramDiv"></div>
 
</div>

CSS

body { margin:1; /* This is used to reset any browser-default margins */ }


#myDiagramDiv { height:95vh; }

#myOverviewDiv {
    position: absolute;
    width:162px;
    height:100px;
    top: 6px;
    left: 6px;
    background-color: lightgrey;
    z-index: 300; /* make sure its in front */
    border: solid 1px grey;
  }

JavaScript

$(document).ready(function()
{  
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        {
          allowMove: true,  // Set falue so  user cannot move any nodes
          initialAutoScale: go.Diagram.Uniform,  // initially the whole diagram fits in the viewport
          initialContentAlignment: go.Spot.Center,  // center the content
          layout:
            $(go.TreeLayout,
              {
                treeStyle: go.TreeLayout.StyleLastParents,
                arrangement: go.TreeLayout.ArrangementHorizontal,
                // properties for most of the tree:
                compaction: go.TreeLayout.CompactionNone,
                angle: 90,
                alignment: go.TreeLayout.AlignmentCenterSubtrees,
                layerSpacing: 80,
                nodeSpacing: 60,
                breadthLimit:0,
                // properties for the "last parents":
                alternateAngle: 90,
                //alternateLayerSpacing: 35,
                alternateAlignment: go.TreeLayout.AlignmentBus,
                //alternateNodeIndent: 10,
                //alternateNodeIndentPastParent: 1.0,
                //alternateNodeSpacing: 10,
               // alternateLayerSpacing: 20,
                //alternateLayerSpacingParentOverlap: 1.0,
               // alternatePortSpot: new go.Spot(0.01, 1, 4, 0),
                //alternateChildPortSpot: go.Spot.Left
              }),
          "LayoutCompleted": function(e) {
            var y = Infinity;
            var h = 0;
            e.diagram.findTopLevelGroups().each(function(g) {
              y = Math.min(y, g.actualBounds.y);
              h = Math.max(h, g.actualBounds.height);
            });
            e.diagram.findTopLevelGroups().each(function(g) {
              g.position = new go.Point(g.position.x, y);
              if (g.isSubGraphExpanded) { g.height = h;} 
      ...