GoJs连线上的信息展示使用详解

nodes: [
    {
      key: "1",
      text: "张三",
      nodeBs: "root",
    },
    {
      key: "1-1",
      text: "李四",
      nodeBs: "root",
    },
    {
      key: "1-2",
      text: "王二",
      nodeBs: "root",
    }
  ],
  links: [
    {
      from: "1",
      to: "1-1",
      text:"父子"
    },
    {
      from: "1",
      to: "1-2",
      text:"兄弟"
    },
    {
      from: "1-1",
      to: "1-2",
      text:"亲戚"
    },
  ],
//methods
this.myDiagram = $$(go.Diagram, "myDiagramDiv", {layout: $$(go.ForceDirectedLayout)});
  this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Auto",
    $$(go.Shape, "RoundedRectangle", {
      strokeWidth: 1,
      fill: "transparent",
      stroke: "#67B73C",
    }),
    $$(
        go.TextBlock,
        {
            width: 20,
            margin: 20,
        },
        new go.Binding("text", "text")
    )
  );
  this.myDiagram.linkTemplate =
    $$(go.Link,
    $$(go.Shape),                           
    $$(go.TextBlock,                        
        new go.Binding("text", "text"))
    );
  this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

this.myDiagram.linkTemplate = $$(
    go.Link,
    $$(go.Shape),
    $$(
      go.Panel,
      "Auto", 
      $$(go.Shape, "TriangleDown", { fill: "#67B73C", stroke: "#FF9900" }),
      $$(go.TextBlock, { margin: 5 }, new go.Binding("text", "text"))
    )
);

this.myDiagram.linkTemplate = $$(
    go.Link,
    $$(go.Shape),                           
    $$(go.TextBlock, {segmentOrientation: go.Link.OrientUpright},new go.Binding("text", "text"))
);

//连线数据
{
  from: "1",
  to: "1-2",
  text: "上方",
  text1: "线上",
  text2: "下方",
  text3: "起点",
  text4: "终点",
},
//连线模板
this.myDiagram.linkTemplate = $$(
    go.Link,
    $$(go.Shape),                           
    $$(go.TextBlock,{ segmentOffset: new go.Point(0, -20),segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text")),
    $$(go.TextBlock,{ segmentOffset: new go.Point(0, 0),segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text1")),
    $$(go.TextBlock,{ segmentOffset: new go.Point(0, 20),segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text2")),
    $$(go.TextBlock,{ segmentIndex: 0,segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text3")),
    $$(go.TextBlock,{ segmentIndex: 1,segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text4")),
);