链接上的标签

通常在链接（尤其是文本）上添加注释或修饰。

简单链接标签

默认情况下，如果将GraphObject添加到Link，它将位于链接的中间。在此示例中，我们仅将TextBlock添加到链接，并将其TextBlock.text属性绑定到链接数据的“ text”属性。

  1. diagram.nodeTemplate =
  2.     $(go.Node, "Auto",
  3.       new go.Binding("location", "loc", go.Point.parse),
  4.       $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
  5.       $(go.TextBlock, { margin: 5 },
  6.         new go.Binding("text", "key"))
  7.     );
  9.   diagram.linkTemplate =
  10.     $(go.Link,
  11.       $(go.Shape),                           //这是链接形状（线）
  12.       $(go.Shape, { toArrow: "Standard" }),  //这是一个箭头
  13.       $(go.TextBlock,                        //这是一个链接标签
  14.         new go.Binding("text", "text"))
  15.     );
  17.   var nodeDataArray = [
  18.     { key: "Alpha", loc: "0 0" },
  19.     { key: "Beta", loc: "200 50" }
  20.   ];
  21.   var linkDataArray = [
  22.     { from: "Alpha", to: "Beta", text: "a label" }
  23.   ];
  24.   diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

image.png

虽然使用TextBlock作为链接标签是很平常的事，但是它可以是任何GraphObject， 例如Shape或任意复杂的Panel。

  1. diagram.nodeTemplate =
  2.     $(go.Node, "Auto",
  3.       new go.Binding("location", "loc", go.Point.parse),
  4.       $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
  5.       $(go.TextBlock, { margin: 5 },
  6.         new go.Binding("text", "key"))
  7.     );
  9.   diagram.linkTemplate =
  10.     $(go.Link,
  11.       $(go.Shape),
  12.       $(go.Shape, { toArrow: "Standard" }),
  13.       $(go.Panel, "Auto",  // this whole Panel is a link label
  14.         $(go.Shape, "TenPointedStar", { fill: "yellow", stroke: "gray" }),
  15.         $(go.TextBlock, { margin: 3 },
  16.           new go.Binding("text", "text"))
  17.       )
  18.     );
  20.   var nodeDataArray = [
  21.     { key: "Alpha", loc: "0 0" },
  22.     { key: "Beta", loc: "200 50" }
  23.   ];
  24.   var linkDataArray = [
  25.     { from: "Alpha", to: "Beta", text: "hello!" }  // 添加了链接标签的信息
  26.   ];
  27.   diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

image.png
链接是正交路由或贝塞尔曲线

  1.  diagram.nodeTemplate =
  2.     $(go.Node, "Auto",
  3.       new go.Binding("location", "loc", go.Point.parse),
  4.       $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
  5.       $(go.TextBlock, { margin: 5 },
  6.         new go.Binding("text", "key"))
  7.     );
  9.   diagram.linkTemplate =
  10.     $(go.Link,
  11.       { routing: go.Link.Orthogonal },
  12.       $(go.Shape),
  13.       $(go.Shape, { toArrow: "Standard" }),
  14.       $(go.TextBlock, { textAlign: "center" },  // centered multi-line text
  15.         new go.Binding("text", "text"))
  16.     );
  18.   var nodeDataArray = [
  19.     { key: "Alpha", loc: "0 0" },
  20.     { key: "Beta", loc: "200 50" }
  21.   ];
  22.   var linkDataArray = [
  23.     { from: "Alpha", to: "Beta", text: "a label\non an\northo link" }
  24.   ];
  25.   diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

image.png
尽管将标签放置在链接的中间是默认行为，但是您可以设置以“ segment”开头的GraphObject属性，以指定确切位置以及如何沿链接路径布置对象。

链接标签segmentIndex和segmentFraction

设置GraphObject.segmentIndex属性，以指定对象应位于链接路线的哪一部分。设置GraphObject.segmentFraction属性以控制对象应该走多远，以从段的开头（零）到段的结尾（一）的分数表示。
如果链接来自不具有GraphObject.fromSpot的节点（即Spot.None）并到达不具有GraphObject.toSpot的节点，则链接中可能只有一个段，段号为零。

  1.  diagram.nodeTemplate =
  2.     $(go.Node, "Auto",
  3.       new go.Binding("location", "loc", go.Point.parse),
  4.       $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
  5.       $(go.TextBlock, { margin: 5 },
  6.         new go.Binding("text", "key"))
  7.     );
  9.   diagram.linkTemplate =
  10.     $(go.Link,
  11.       $(go.Shape),
  12.       $(go.Shape, { toArrow: "Standard" }),
  13.       $(go.TextBlock, "from", { segmentIndex: 0, segmentFraction: 0.2 }),
  14.       $(go.TextBlock, "mid", { segmentIndex: 0, segmentFraction: 0.5 }),
  15.       $(go.TextBlock, "to", { segmentIndex: 0, segmentFraction: 0.8 })
  16.     );
  18.   var nodeDataArray = [
  19.     { key: "Alpha", loc: "0 0" },
  20.     { key: "Beta", loc: "200 50" }
  21.   ];
  22.   var linkDataArray = [
  23.     { from: "Alpha", to: "Beta" }
  24.   ];
  25.   diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

image.png
如果链接中有许多段，则需要指定不同的段号。例如，正交链接通常在路线中有6个点，这意味着从0到4编号为5个路段。

  1. diagram.nodeTemplate =
  2.     $(go.Node, "Auto",
  3.       new go.Binding("location", "loc", go.Point.parse),
  4.       $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
  5.       $(go.TextBlock, { margin: 5 },
  6.         new go.Binding("text", "key"))
  7.     );
  9.   diagram.linkTemplate =
  10.     $(go.Link,
  11.       { routing: go.Link.Orthogonal },
  12.       $(go.Shape),
  13.       $(go.Shape, { toArrow: "Standard" }),
  14.       $(go.TextBlock, "from", { segmentIndex: 1, segmentFraction: 0.5 }),
  15.       $(go.TextBlock, "mid", { segmentIndex: 2, segmentFraction: 0.5 }),
  16.       $(go.TextBlock, "to", { segmentIndex: 3, segmentFraction: 0.5 })
  17.     );
  19.   var nodeDataArray = [
  20.     { key: "Alpha", loc: "0 0" },
  21.     { key: "Beta", loc: "200 50" }
  22.   ];
  23.   var linkDataArray = [
  24.     { from: "Alpha", to: "Beta" }
  25.   ];
  26.   diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

image.png
但是，您也可以从链接的“到”端向后计数段。-1是最后一个分段，-2是倒数第二个分段，依此类推。当您使用负分段索引时，分段分数从最接近“ to”端的0变为该分段中最靠后的一端的1。沿从“到”端的路线。因此，segmentIndex为-1，segmentFraction为0的点是链接路由的终点。segmentIndex为-1且segmentFraction为1的segmentIndex与segmentIndex -2和segmentFraction 0相同。
对于属于链接“至”端附近的标签，通常对GraphObject.segmentIndex使用负值。当链接中的段数未知或可能变化时，此约定效果更好。

链接标签segmentOffset和alignmentFocus

给定标签对象的位置有两种方法，可以给定在由线段索引和小数距离指定的链接线段上的特定点的标签对象的位置。
所述GraphObject.segmentOffset属性控制，其中相对于所述点由所述确定的链路段对象位置GraphObject.segmentIndex和GraphObject.segmentFraction性质。偏移不是点的简单偏移，而是根据该链接段的角度旋转的。Y偏移量的正值可将标签元素移向链接的右侧，如沿链接方向所示。当然，Y偏移的负值会将其移向左侧。

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"))
    );
  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) })
    );
  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);

image.png
如果将一个节点绕另一节点绕圈拖动，将看到“左”和“右”标签的位置。
更改有效偏移量的另一种方法是通过更改相对于链接线段点定位的对象中的点。您可以通过设置GraphObject.alignmentFocus来做到这一点，正如上面所看到的，默认值为Spot.Center。（其他Panel类型也使用GraphObject.alignmentFocus，这就是为什么其名称不以“ segment”开头的原因。）

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"))
    );
  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) })
    );
  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);

image.png

链接标签段的方向

所述GraphObject.segmentOrientation属性控制相对于所述连杆部分的角度的标签对象的角度。您可以使用几个可能的值。默认方向为Link.None，表示完全不旋转。 Link.OrientAlong通常用于使对象始终以与链接段相同的角度旋转。 Link.OrientUpright类似于“ OrientAlong”，但通常在标签中包含文本时使用，以使其更易于阅读。

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"))
    );
  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 })
    );
  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);

image.png
现在，如果在节点上四处移动，您将始终能够读取标签文本，但是每个标签都停留在链接的预期侧，如沿链接方向所示。
这指出了0/1和1/0的segmentIndex / segmentFraction对之间的差异。尽管它们都指向同一点，但是与第一对关联的角度是第一段的角度（段0），而与第二对关联的角度是第二段的角度。

在末端附近链接标签

对于靠近链接两端的标签，将GraphObject.segmentOffset设置为Point（NaN，NaN）可能会很方便。这使偏移量是标签对象的宽度的一半和高度的一半。

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"))
    );
  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 })
    );
  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);

image.png

箭头

您已经了解了用于控制Link中对象的位置和角度的GraphObject “ segment …”属性，现在很容易说明如何定义箭头。箭头只是标签：以方便的方式初始化的Shape。
您可以在以下文件中看到所有内置箭头定义的副本：Arrowheads.js。
这是通过将Shape.toArrow设置为“ Standard” 来初始化箭头Shape的等效设置。

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"))
    );
  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") })
    );
  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);

image.png
文章链接:https://www.evget.com/article/2019/11/19/33475.html