Link template orthgonal

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 tree layout >

JavaScript

init();

function init() {
  const $ = go.GraphObject.make; // for conciseness in defining templates
  myDiagram =
    new go.Diagram("myDiagramDiv", // must be the ID or reference to div
      {
        initialAutoScale: go.Diagram.Uniform,
        padding: 10,
        "animationManager.isEnabled": false,
        layout: $(go.TreeLayout, {
          angle: 90  //change this to 0 for horizontal
      	})
      });

  myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse),
    $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "key"))
  );

myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "", { segmentIndex: 1, segmentFraction: 0.5 }),
    $(go.TextBlock, "", { 
      alignmentFocus: new go.Spot(0, 1), //change to 0 for right (x,y)
      segmentIndex: 2, 
      segmentFraction: 0.5 
     }),
    $(go.TextBlock, "third segment label", { 
      //alignmentFocus: new go.Spot(0, 0.5), //change to 0 for right (x,y)
      segmentIndex: 3,
      segmentFraction: 0.5,
      segmentOrientation: go.Link.OrientUpright,
      segmentOffset: new go.Point(0,-10)
     })
  );
generateGraph();
}

function generateGraph() {
  var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 200" },
  { key: "Gamma", loc: "400 200" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" }
];

myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}