GoJs连线绘图模板Link使用示例详解

//data
nodes: [
      {
        key: "1",
        text: "三国人物志",
      },
      {
        key: "1-1",
        text: "曹丕",
      },
      {
        key: "1-2",
        text: "刘备",
      },
      {
        key: "1-3",
        text: "孙权",
      },
    ],
    links: [
      {
        from: "1",
        to: "1-1",
      },
      {
        from: "1",
        to: "1-2",
      },
      {
        from: "1",
        to: "1-3",
      },
    ],
    //methods
    this.myDiagram = $$(go.Diagram, "myDiagramDiv", {layout: $$(go.TreeLayout)});
    this.myDiagram.nodeTemplate = $$(
      go.Node,
      "Horizontal",
      $$(go.TextBlock,{background:"#67B73C"},new go.Binding("text", "text")),
    );
    this.myDiagram.linkTemplate = $$(
        go.Link,$$(go.Shape,{stroke: "#00FFCC"})
    );
    this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

{
    routing: go.Link.Orthogonal, // 设置连线和节点不重叠
    curve: go.Link.JumpGap, // 设置交叉线的交叉部分的处理方式
    corner: 3, // 连线拐角处的弧度
    toEndSegmentLength: 30, //设置连线拐点到目标节点的距离
    fromEndSegmentLength: 30, //设置起始点到连线拐点的距离
    fromShortLength:3, //设置连线的起始点到起始端口的距离
    toShortLength:3, //设置连线的结尾处到目标节点端口的距离
    selectable: false, //设置连线是否可以选择
    fromSpot: go.Spot.LeftRightSides, //设置连线出发点的端口
    toSpot: go.Spot.LeftRightSides, //设置连线终点的端口
},

//data
nodes: [
  {
    key: "1",
    text: "三国人物志",
  },
  {
    key: "1-1",
    text: "曹丕",
  },
  {
    key: "1-1-1",
    text: "曹叡",
  },
  {
    key: "1-2",
    text: "刘备",
  },
  {
    key: "1-2-1",
    text: "刘禅",
  },
  {
    key: "1-3",
    text: "孙权",
  },
  {
    key: "1-3-1",
    text: "孙亮",
  },
],
links: [
  {
    from: "1",
    to: "1-1",
    routing: go.Link.AvoidsNodes,
    text:'AvoidsNodes'
  },
  {
    from: "1",
    to: "1-1-1",
    routing: go.Link.AvoidsNodes,
    text:'AvoidsNodes'
  },
  {
    from: "1-1",
    to: "1-1-1",
    routing: go.Link.AvoidsNodes,
    text:'AvoidsNodes'
  },
  {
    from: "1",
    to: "1-2",
    routing: go.Link.Orthogonal,
    text:'Orthogonal'
  },
  {
    from: "1",
    to: "1-2-1",
    routing: go.Link.Orthogonal,
    text:'Orthogonal'
  },
  {
    from: "1-2",
    to: "1-2-1",
    routing: go.Link.Orthogonal,
    text:'Orthogonal'
  },
  {
    from: "1",
    to: "1-3",
    routing: go.Link.Normal,
    text:'Normal'
  },
  {
    from: "1",
    to: "1-3-1",
    routing: go.Link.Normal,
    text:'Normal'
  },
  {
    from: "1-3",
    to: "1-3-1",
    routing: go.Link.Normal,
    text:'Normal'
  },
],

{
    corner: 10,
    toEndSegmentLength: 100,
    fromEndSegmentLength: 100,
    fromShortLength:5,
    toShortLength:5
}

{
  routing: go.Link.Orthogonal, 
  fromSpot: go.Spot.Left, 
  toSpot: go.Spot.Right
}