diagram for directed layout with demo engine

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 diagram chart template >

JavaScript

init()

function init() {
  const $ = go.GraphObject.make
  myDiagram = $(
    go.Diagram,
    "myDiagramDiv", // must be the ID or reference to div
    {
      "undoManager.isEnabled": true, // enable undo & redo
    },
  )

  myDiagram.nodeTemplate = $(
    go.Node,
    "Auto",
    {
      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: 20
          },
          new go.Binding("text", "name"),
        ),
      ),
    ),
  )

  myDiagram.layout = $(go.ForceDirectedLayout, {
    defaultSpringLength: 10, // increase to push nodes out further
    defaultElectricalCharge: -1500, // stronger repulsion=
    //maxIterations: 1000,
    defaultSpringStiffness: 0.1,
    //epsilonDistance: 0.1
    //maxIterations: 1
  })

  // 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" },
    ),
  ) // the link shape

  load()
} // end init

function load() {
  var nodeDataArray = [
    {
      id: 0,
      type: "geometric_shape",
      children: [
        {
          key: 1,
          depthNumber: 1,
        },
        {
          key: 4,
          depthNumber: 1,
        },
        {
          key: 8,
          depthNumber: 1,
        },
        {
          key: 24,
          depthNumber: 1,
        },
        {
          key: 34,
         ...