UNPKG

gojs/intro/linkLabels.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Link Labels -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133<h1>Labels on Links</h1>
134<p>
135It is common to add annotations or decorations on a link, particularly text.
136</p>
137
138<h2 id="SimpleLinkLabels">Simple Link labels</h2>
139<p>
140By default if you add a <a>GraphObject</a> to a <a>Link</a>, it will be positioned at the middle of the link.
141In this example, we just add a <a>TextBlock</a> to the link and bind its <a>TextBlock.text</a> property
142to the link data's "text" property.
143</p>
144<pre class="lang-js" id="simple"><code>
diagram.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"))
  );
152
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),                           // this is the link shape (the line)
    $(go.Shape, { toArrow: "Standard" }),  // this is an arrowhead
    $(go.TextBlock,                        // this is a Link label
      new go.Binding("text", "text"))
  );
160
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta", text: "a label" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
169</code></pre>
170<script>goCode("simple", 600, 100)</script>
171<p>
172Note that clicking on the text label results in selection of the whole Link.
173</p>
174
175<p>
176Although it is commonplace to use a <a>TextBlock</a> as the link label, it can be any <a>GraphObject</a>
177such as a <a>Shape</a> or an arbitrarily complex <a>Panel</a>.  Here is a simple Panel label:
178</p>
179<pre class="lang-js" id="labels"><code>
diagram.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"))
  );
187
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.Panel, "Auto",  // this whole Panel is a link label
      $(go.Shape, "TenPointedStar", { fill: "yellow", stroke: "gray" }),
      $(go.TextBlock, { margin: 3 },
        new go.Binding("text", "text"))
    )
  );
198
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta", text: "hello!" }  // added information for link label
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
207</code></pre>
208<script>goCode("labels", 600, 100)</script>
209
210<p>
211This also works if the link is orthogonally routed or bezier-curved.
212</p>
213<pre class="lang-js" id="simpleOrtho"><code>
diagram.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"))
  );
221
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, { textAlign: "center" },  // centered multi-line text
      new go.Binding("text", "text"))
  );
230
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta", text: "a label\non an\northo link" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
239</code></pre>
240<script>goCode("simpleOrtho", 600, 100)</script>
241
242<p>
243Although positioning the label at the middle of the link is the default behavior,
244you can set <a>GraphObject</a> properties that start with "segment" to specify exactly
245where and how to arrange the object along the route of the link.
246</p>
247
248<h2 id="LinkLabelSegmentIndexAndSegmentFraction">Link label segmentIndex and segmentFraction</h2>
249<p>
250Set the <a>GraphObject.segmentIndex</a> property in order to specify which segment of the link route
251the object should be on.
252Set the <a>GraphObject.segmentFraction</a> property to control how far the object should be, as a fraction
253from the start of the segment (zero) to the end of the segment (one).
254</p>
255<p>
256When setting the <a>GraphObject.segmentIndex</a> property to NaN,
257the fraction will be calculated along the entire link route instead of a particular segment.
258</p>
259<p>
260In the case of a link that comes from a node with no <a>GraphObject.fromSpot</a> (i.e. <a>Spot,None</a>)
261and goes to a node with no <a>GraphObject.toSpot</a>, there may be only one segment in the link, segment number zero.
262</p>
263<pre class="lang-js" id="fraction"><code>
diagram.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"))
  );
271
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "from", { segmentIndex: 0, segmentFraction: 0.2 }),
    $(go.TextBlock, "mid", { segmentIndex: 0, segmentFraction: 0.5 }),
    $(go.TextBlock, "to", { segmentIndex: 0, segmentFraction: 0.8 })
  );
280
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
289</code></pre>
290<script>goCode("fraction", 600, 100)</script>
291
292<p>
293In the case of a link that has many segments in it, you will want to specify different segment numbers.
294Orthogonal links, for example, typically have 6 points in the route, which means five segments numbered from 0 to 4.
295</p>
296<pre class="lang-js" id="fractionOrtho"><code>
diagram.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"))
  );
304
diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "from", { segmentIndex: 1, segmentFraction: 0.5 }),
    $(go.TextBlock, "mid", { segmentIndex: 2, segmentFraction: 0.5 }),
    $(go.TextBlock, "to", { segmentIndex: 3, segmentFraction: 0.5 })
  );
314
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
323</code></pre>
324<script>goCode("fractionOrtho", 600, 100)</script>
325
326<p>
327However, you can also count segments backwards from the "to" end of the link.
328-1 is the last segment, -2 is the next to last, etc.
329When you use a negative segment index, the segment fraction goes from 0 closest to the "to" end
330to 1 for the end of that segment that is farthest back along the route from the "to" end.
331Thus a segmentIndex of -1 with a segmentFraction of 0 is the very end point of the link route.
332A segmentIndex of -1 with a segmentFraction of 1 is the same point as segmentIndex -2 and segmentFraction 0.
333</p>
334<p>
335For labels that belong near the "to" end of a link, you will normally use negative values for <a>GraphObject.segmentIndex</a>.
336This convention works better when the number of segments in a link is unknown or may vary.
337</p>
338
339<p>
Lastly, one can specify a segmentIndex of NaN to have the fraction calculated along the entire link route instead of just a particular segment.
341</p>
342<pre class="lang-js" id="fractionNoIndex"><code>
diagram.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"))
  );
350
diagram.linkTemplate =
  $(go.Link,
    { curve: go.Link.Bezier },
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "1/3", { segmentIndex: NaN, segmentFraction: 0.33 }),  // label at 1/3 of link length
    $(go.TextBlock, "2/3", { segmentIndex: NaN, segmentFraction: 0.67 })  // label at 2/3 of link length
  );
359
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
368</code></pre>
369<script>goCode("fractionNoIndex", 600, 100)</script>
370
371<h2 id="LinkLabelSegmentOffsetAndAlignmentFocus">Link label segmentOffset and alignmentFocus</h2>
372<p>
373There are two ways of making small adjustments to the position of a label object given a particular point on a link segment
374specified by the segment index and fractional distance.
375</p>
376<p>
377The <a>GraphObject.segmentOffset</a> property controls where to position the object relative to the point
378on a link segment determined by the <a>GraphObject.segmentIndex</a> and <a>GraphObject.segmentFraction</a> properties.
379The offset is not a simple offset of the point -- it is rotated according to the angle of that link segment.
380A positive value for the Y offset moves the label element towards the right side of the
381link, as seen going in the direction of the link.  Naturally a negative value for the Y offset moves it towards
382the left side.
383</p>
384<pre class="lang-js" id="offset"><code>
diagram.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"))
  );
392
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "left", { segmentOffset: new go.Point(0, -10) }),
    $(go.TextBlock, "right", { segmentOffset: new go.Point(0, 10) })
  );
400
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
409</code></pre>
410<script>goCode("offset", 600, 200)</script>
411<p>
412If you drag one node around in a circle around the other one,
413you will see how the "left" and "right" labels are positioned.
414</p>
415
416<p>
417Another way to change the effective offset is by changing the spot in the object that is being
418positioned relative to the link segment point.
419You can do that by setting the <a>GraphObject.alignmentFocus</a>, which as you have seen above defaults to <a>Spot.Center</a>.
420(<a>GraphObject.alignmentFocus</a> is also used by other <a>Panel</a> types, which is why its name does not start with "segment".)
421</p>
422<pre class="lang-js" id="alignmentFocus"><code>
diagram.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"))
  );
430
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "left", { alignmentFocus: new go.Spot(1, 0.5, 3, 0) }),
    $(go.TextBlock, "right", { alignmentFocus: new go.Spot(0, 0.5, -3, 0) })
  );
438
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
447</code></pre>
448<script>goCode("alignmentFocus", 600, 200)</script>
449<p>
450Yet you may instead want to control the angle of the individual labels based on the angle of the link segment.
451</p>
452
453<h2 id="LinkLabelSegmentOrientation">Link label segmentOrientation</h2>
454<p>
455The <a>GraphObject.segmentOrientation</a> property controls the angle of the label object relative
456to the angle of the link segment.
457There are several possible values that you can use.
458The default orientation is <a>Link,None</a>, meaning no rotation at all.
459<a>Link,OrientAlong</a> is commonly used to have the object always rotated at the same angle as the link segment.
460<a>Link,OrientUpright</a> is like "OrientAlong", but is often used when there is text in the label, to make it easier to read.
461</p>
462<pre class="lang-js" id="orient"><code>
diagram.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"))
  );
470
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "left",
      { segmentOffset: new go.Point(0, -10),
        segmentOrientation: go.Link.OrientUpright }),
    $(go.TextBlock, "middle",
      { segmentOffset: new go.Point(0, 0),
        segmentOrientation: go.Link.OrientUpright }),
    $(go.TextBlock, "right",
      { segmentOffset: new go.Point(0, 10),
        segmentOrientation: go.Link.OrientUpright })
  );
485
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
494</code></pre>
495<script>goCode("orient", 600, 200)</script>
496<p>
497Now if you move a node around you will always be able to read the label texts,
498and yet each label stays on its intended side of the link, as seen going in the direction of the link.
499</p>
500<p>
501This points out a difference between a segmentIndex/segmentFraction pair of 0/1 and 1/0.
502Although they both refer to the same point, the angle associated with the first pair is the angle of the first segment (segment 0),
503whereas the angle associated with the second pair is the angle of the second segment.
504</p>
505
506<h2 id="LinkLabelsNearEnds">Link labels near the ends</h2>
507<p>
508For labels that are near either end of a link, it may be convenient to set the <a>GraphObject.segmentOffset</a> to
509Point(NaN, NaN).  This causes the offset to be half the width and half the height of the label object.
510</p>
511<pre class="lang-js" id="nearEnds"><code>
diagram.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"))
  );
519
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" }),
    $(go.TextBlock, "from",
      { segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN),
        segmentOrientation: go.Link.OrientUpright }),
    $(go.TextBlock, "to",
      { segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN),
        segmentOrientation: go.Link.OrientUpright })
  );
531
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
540</code></pre>
541<script>goCode("nearEnds", 600, 200)</script>
542
543<h2 id="Arrowheads">Arrowheads</h2>
544<p>
545Now that you know more about the <a>GraphObject</a> "segment..." properties for controlling the position and angle of objects in a <a>Link</a>,
546it is easy to explain how arrowheads are defined.  Arrowheads are just labels: <a>Shape</a>s that are initialized in a convenient manner.
547</p>
548<p>
549You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../extensions/Arrowheads.js">Arrowheads.js</a>.
550</p>
551<p>
552Here are the equivalent settings for initializing an arrowhead <a>Shape</a> by setting <a>Shape.toArrow</a> to "Standard".
553</p>
554
555<pre class="lang-js" id="arrowheads"><code>
diagram.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"))
  );
563
diagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape,
      // the following are the same as { toArrow: "Standard" }:
      { segmentIndex: -1,
        segmentOrientation: go.Link.OrientAlong,
        alignmentFocus: go.Spot.Right,
        geometry: go.Geometry.parse("F1 m0 0 l8 4  -8 4  2 -4 z") })
  );
574
var nodeDataArray = [
  { key: "Alpha", loc: "0 0" },
  { key: "Beta", loc: "200 50" }
];
var linkDataArray = [
  { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
583</code></pre>
584<script>goCode("arrowheads", 600, 200)</script>
585
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
596
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
659
            </ul>
          </li>
        </ul>
663
664
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
670</footer>  </body>
671
672<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
673<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
684
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
694</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
697<script src="../extensions/Figures.js"></script>  <script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
710</html>
1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS Link Labels -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
30	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`