gojs diagram dynamic 5

sankey data use levels

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>
ight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P12(5)"
    },
    {
        "from": 6,
        "to": 22,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P11"
    },
    {
        "from": 6,
        "to": 19,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P11(2)"
    },
    {
        "from": 6,
        "to": 24,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P11(3)"
    },
    {
        "from": 6,
        "to": 25,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P11(4)"
    },
    {
        "from": 6,
        "to": 26,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P11(5)"
    },
    {
        "from": 6,
        "to": 27,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P11(6)"
    },
    {
        "from": 12,
        "to": 6,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P1"
    },
    {
        "from": 12,
        "to": 1,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P1(2)"
    },
    {
        "from": 12,
        "to": 30,
        "weight": 1,
        "dataLabels": {
            "enabled": false
        },
        "eQCategoryValue": "P1(3)"
    },
    {
        "from": 12,
        "to": 31,
        "weight": 1,
   ...

JavaScript

function init() {
var start = new Date().getTime();
    // 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;
    var diagramData;

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

    myDiagram.nodeTemplate = $(go.Node,
      go.Panel.Horizontal,
      { 
      		portId: '', fromLinkable: true, toLinkable: true 
      },
      new go.Binding('visible'),
      $('Button', { name: "incoming_button", visible: true },
       /*  new go.Binding('visible', 'isTreeRoot', (root, node)=>{
          debugger;
          return !root;
        }).ofObject(), */
        $(go.Shape,
          {
            name: 'IncomingButtonIcon',
            figure: 'MinusLine',
            desiredSize: new go.Size(6, 6),
          },
          new go.Binding(
            'figure',
            'isIncomingCollapsed', // data.isCollapsed remembers "collapsed" or "expanded"
            (collapsed) => (collapsed ? 'PlusLine' : 'MinusLine')
          )
        ),
        {
          click: (e, obj) => {
            e.diagram.startTransaction();
            var node = obj.part;
            if (node.data.isIncomingCollapsed) {
              incomingExpandFrom(node, node);
            } else {
              incomingCollapseFrom(node, node);
            }
            e.diagram.zoomToFit();
            e.diagram.commitTransaction('toggled visibility of dependencies');
          },
        }
      ),
      $(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:...