gojs diagram dynamic 1

by saurabhkolhe

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:650px"></div>

</div>

<! This is force directed layout for testing expand collapse functionality in case of circular links>

JavaScript

function init() {
    // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
    // For details, see https://gojs.net/latest/intro/buildingObjects.html
    const $ = go.GraphObject.make;

    myDiagram = new go.Diagram('myDiagramDiv', {
      padding: 10,
      layout: new go.ForceDirectedLayout(),
      'undoManager.isEnabled': true,
    });

    myDiagram.nodeTemplate = $(go.Node,
      go.Panel.Vertical,
      { portId: '', fromLinkable: true, toLinkable: true },
      new go.Binding('visible'),
      $(go.Panel,
        go.Panel.Auto,
        $(go.Shape,
          { fill: 'white', minSize: new go.Size(30, 30), strokeWidth: 0 },
          { cursor: 'pointer' }, // indicate that linking may start here
          new go.Binding('fill', 'color')
        ),
        $(go.TextBlock,
          { margin: 2 },
          { fromLinkable: false, toLinkable: false }, // don't start drawing a link from the text
          new go.Binding('text', 'key')
        )
      ),
      $('Button', // a replacement for "TreeExpanderButton" that works for non-tree-structured graphs
        // assume initially not visible because there are no links coming out
        { visible: false },
        // bind the button visibility to whether it's not a leaf node
        new go.Binding('visible', 'isTreeLeaf', (leaf) => !leaf).ofObject(),
        $(go.Shape,
          {
            name: 'ButtonIcon',
            figure: 'MinusLine',
            desiredSize: new go.Size(6, 6),
          },
          new go.Binding(
            'figure',
            'isCollapsed', // data.isCollapsed remembers "collapsed" or "expanded"
            (collapsed) => (collapsed ? 'PlusLine' : 'MinusLine')
          )
        ),
        {
          click: (e, obj) => {
            e.diagram.startTransaction();
            var node = obj.part;
            if (node.data.isCollapsed) {
              expandFrom(node, node);
            } else {
              collapseFrom(node,...