GOJS教程 -- 如何使用Links

Link对象顾名思义就是连线，它可以通过连线的方式表达Node之间的关系。

无方向连线

最简单的Link就是没有箭头的，无方向的连线。当Diagram中的Node之间的关系没有方向性或者它们之间存在隐性关系的时候，我们使用这种连线。

我们在构建Link时，先设置创建模板（linkTemplate），该模板指定了连线的样式。然后创建一个指定连线关系的数组linkDataArray，我们通过该数组指定Node之间的连线关系，最后通过GraphLinksModel方法构建连线。

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,       // the whole link panel
  $(go.Shape));  // the link shape, default black stroke

var nodeDataArray = [
{ key: "Alpha", loc: "0 0" },
{ key: "Beta", loc: "100 50" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

带方向连线

一般情况下我们都需要使用带方向的连线，即带箭头的连线。我们只需要修改一下linkTemplate即可，我们在连线模板中加入一个箭头，通过在Link中再添加一个Shape，然后设置Shape.toArrow属性为OpenTrigangle。

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),  // the link shape
  $(go.Shape,   // the arrowhead
    { toArrow: "OpenTriangle", fill: null })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

连线路径

如果你想改变连线的路径，那么需要设置Link.routing属性，下面的例子中展示了Link.Normal和Link.Orthogonal两种连线路径。

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,
  new go.Binding("routing", "routing"),
  $(go.Shape),
  $(go.Shape, { toArrow: "Standard" })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "50 50" },
    { key: "Gamma", loc: "100 25" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta", routing: go.Link.Normal },
    { from: "Alpha", to: "Gamma", routing: go.Link.Orthogonal }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

要注意的是，这里设置连线路径的是Shape里的属性，在GraphObject中也有设置路径的属性，GraphObject.fromSpot和GraphObject.toSpot，前者是作用于Shape上的，后者是作用于容器上的。

你还可以设置Link.routing属性为Link.AvoidsNodes，可以让连线自动避开Node，也就是说可以避免Link与Node相交。但是如果有一个Node离起始Node或者终点Node非常近的时候，连线就没有办法避让了，因为它没有足够的空间去计算避让路线。

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,
  { routing: go.Link.AvoidsNodes },  // link route should avoid nodes
  $(go.Shape),
  $(go.Shape, { toArrow: "Standard" })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "250 40" },
    { key: "Gamma", loc: "100 0" },
    { key: "Delta", loc: "75 50" },
    { key: "Epsilon", loc: "150 30" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

连线的弯曲度和角度

在我们创建好连线关系以及路径后，就可以使用其他属性来控制连线的其他特性，比如说弯曲度。我们可以通过设置Link.curve属性设置连线的弯曲度，默认情况下该属性的值为Link.Node。

下面的例子中，我们将Link.curve属性设置为Link.bezier，让连线产生弧度。

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,
  { curve: go.Link.Bezier },  // Bezier curve
  $(go.Shape),
  $(go.Shape, { toArrow: "Standard" })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

我们还可以通过Link.curviness属性设置连线的弯曲力度。

下面的例子中，两个Node之间有多条连线，并且我们没有设置连线的弯曲度，但是我们可以看到，每条连线都自动的产生了轻微的弯曲度的变化。

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,
  { curve: go.Link.Bezier },
  $(go.Shape),
  $(go.Shape, { toArrow: "Standard" })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // multiple links between the same nodes
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

上面第四个例子中，连线避让Node时折角都是直角，我们还可以通过Link.corner属性，设置连线折角的弧度。

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,
  { routing: go.Link.AvoidsNodes,
    corner: 10 },                  // rounded corners
  $(go.Shape),
  $(go.Shape, { toArrow: "Standard" })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "250 40" },
    { key: "Gamma", loc: "100 0" },
    { key: "Delta", loc: "75 50" },
    { key: "Epsilon", loc: "150 30" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

当两条连线相交时，我们希望在视觉上能有所表示。那么我们可以设置Link.curve属性为Link.JumpOver属性，展现出的效果就是一条线越过了交叉的另一条线。

diagram.nodeTemplate =
$(go.Node, "Auto",
  { locationSpot: go.Spot.Center },
  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,
  { routing: go.Link.Orthogonal,  // may be either Orthogonal or AvoidsNodes
    curve: go.Link.JumpOver },
  $(go.Shape),
  $(go.Shape, { toArrow: "Standard" })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 50" },
    { key: "Beta", loc: "100 50" },
    { key: "Alpha2", loc: "50 0" },
    { key: "Beta2", loc: "50 100" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // these two links will cross
    { from: "Alpha2", to: "Beta2" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：

或者我们也可以将Link.curve属性设置为Link.JumpGap，表现为当两条连线相交时，其中一条在相交处会断开。

diagram.nodeTemplate =
$(go.Node, "Auto",
  { locationSpot: go.Spot.Center },
  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,
  { routing: go.Link.Orthogonal,  // may be either Orthogonal or AvoidsNodes
    curve: go.Link.JumpGap },
  $(go.Shape),
  $(go.Shape, { toArrow: "Standard" })
);

var nodeDataArray = [
    { key: "Alpha", loc: "0 50" },
    { key: "Beta", loc: "100 50" },
    { key: "Alpha2", loc: "50 0" },
    { key: "Beta2", loc: "50 100" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // these two links will cross
    { from: "Alpha2", to: "Beta2" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

结果：