For directed layout multiple root nodes issue

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>
<button onclick="init()">Refresh chart</button>
  <button onclick="expandGraph('expand')">Expand chart</button>
  <button onclick="expandGraph('collapse')">Collapse chart</button>
<! This is diagram chart template >

JavaScript

function init() {
  const $ = go.GraphObject.make;
  if (window.myDiagram) {
    window.myDiagram.div = null; // Detach the diagram from the div
    window.myDiagram = null;
  }
  myDiagram = $(go.Diagram, "myDiagramDiv", {
    "undoManager.isEnabled": true
  });

  myDiagram.nodeTemplate = $(
    go.Node,
    "Vertical",
    {
      selectable: true,
      selectionAdorned: false,
    },
    $(
      go.Panel,
      "Auto",
      $(
        go.Panel,
        "Table",
        $(
          go.Panel,
          "Auto",
          $(go.Shape, "Rectangle", {
            fill: "yellow",
            name: "SHAPE",
            height: 40
          })
        ),
        $(
          go.TextBlock,
          {
            textAlign: "center",
            verticalAlignment: go.Spot.Bottom,
            row: 2,
            width: 150,
            height: 30,
          },
          new go.Binding("text", "name")
        )
      )
    ),
  );

  // define the Link template
  myDiagram.linkTemplate = $(
    go.Link,
    {
      layerName: "Background",
      corner: 5,
    },
    $(go.Shape, {
      name: "LINK",
      strokeWidth: 1.5,
      stroke: "black",
    }),
    $(
      go.Shape, // the "to" arrowhead
      { scale: 1, fill: "#D4B52C", toArrow: "Standard" }
    )
  );

  myDiagram.layout = $(go.ForceDirectedLayout, {
    defaultSpringLength: 30,
    defaultElectricalCharge: 200,
    prelayoutSpread: 50
  });

  load();

  myDiagram.addDiagramListener("InitialLayoutCompleted", () => {
    myDiagram.zoomToFit();
  });
} // end init

function load() {
  var nodeDataArray = [
    {
      key: 0,
      name: "Demo Assembly Component ID-0",
    },
    {
      key: 63,
      name: "Demo Assembly Component ID-48",
    },
  ];

  var linkDataArray = []

  // create the Model with data for the tree, and assign to the Diagram
  myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}

function expandGraph(action){
    var model = window.myDiagram.model,
       ...