流程图控件GoJS教程：链接（上）

GoJS是一款功能强大，快速且轻量级的流程图控件。本教程将为您介绍使用Link类可实现节点之间的可视关系。

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.0.17发布，修复了一些bug，增强用户体验，赶快下载试试吧~

GoJS最新试用版

建立连结

链路通常由链路的数据对象中的存在而产生GraphLinksModel.linkDataArray 或由母密钥参考作为值TreeModel.nodeParentKeyProperty在一个节点的数据对象的TreeModel中。用户可以使用LinkingTool：链接工具简介来绘制新链接。

您可以通过修改模型以编程方式创建新链接。通过调用GraphLinksModel.addLinkData 或调用TreeModel.setParentKeyForNodeData直接对模型进行操作是最常见的。显示模型的所有图均会观察到此类更改，以便它们可以自动创建相应的Link。您可以在示例中找到对GraphLinksModel.addLinkData的调用示例。

也可以通过调用LinkingTool.insertLink来创建新链接，而无需详细了解图的模型 。这就是用户绘制新链接的动作实际上是如何创建它的。这种方法知道如何修改GraphLinksModel或TreeModel的适当，同时遵守所提供的附加功能LinkingTool.archetypeLinkData 和其他性质LinkingTool。您可以在示例中找到对LinkingTool.insertLink的调用示例。

非定向链接

最简单的链接是没有箭头的链接，以指示视觉方向。关系实际上是无方向性的，或者方向在图表的组织中是隐含的。

模板仅包含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,       // 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);

标签：