流程圖控件GoJS教程：鏈接（上）

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

默認情況下，模型和圖了解鏈接數據的節點數據引用的方式是通過查看其屬性。如果要在鏈接數據上使用其他屬性，則將GraphLinksModel.linkFromKeyProperty設置為導致節點數據鍵的屬性的名稱，并設置GraphLinksModel.linkToKeyProperty。

箭頭

許多鏈接確實希望通過使用箭頭來指示方向性。 GoJS使創建通用箭頭變得容易：只需添加Shape并設置其Shape.toArrow屬性即可。設置該屬性將自動分配一個幾何到Shape.geometry 并且使得箭頭位于連桿的頭部并以正確的方向指向將設置其他屬性。當然，您可以設置其他Shape屬性，例如Shape.fill，以自定義箭頭的外觀。

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

您可以在“ 箭頭示例”中看到所有預定義的箭頭類型。

您還可以在鏈接的開頭有一個箭頭：設置Shape.fromArrow屬性。請注意，箭頭通常沿鏈接的路徑移動，而不管其在路徑上的位置如何，因此，就像使用實箭頭一樣，設置{ fromArrow: "TripleFeathers" }中的“羽毛”也指向前方。如果鏈接是雙向的，則鏈接“從”端的箭頭名稱可能要以字符串“ Backward ...”開頭。

路徑

如果要自定義每個鏈接所采用的路徑，則需要在鏈接上設置屬性。對鏈接路線遵循的點影響最大的屬性是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);

請注意，計算出的路線還取決于節點的屬性，包括其形狀。還有其他影響路由的屬性，包括GraphObject.fromSpot和GraphObject.toSpot。有關景點的更多討論，請閱讀此介紹頁面：鏈接連接點。此外，某些Layout在鏈接上設置屬性，以根據布局的期望來控制其路由。

您還可以將Link.routing設置為Link.AvoidsNodes：

  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.fromNode或Link.toNode或與之重疊， 并且會阻塞該鏈接的路由，則它將忽略該節點，將其視為只是已連接節點的擴展。同樣，如果由于一個連接的節點周圍有一個節點環而導致不存在避免節點的路由，則路由算法仍將放棄并穿越某些節點。

您可以通過將Node.avoidable設置為false 來聲明可以通過節點進行路由。通常對Group進行此操作，以允許在組外部連接的鏈接在組內很好地路由。

請注意，使用避免節點路由的速度明顯比正常的正交路由慢，尤其是對于大型圖表。

端段長度

影響“正交”和“避免節點”路由采用的精確路由的另一種方法是設置或綁定 GraphObject.fromEndSegmentLength和GraphObject.toEndSegmentLength。這些屬性確定了第一個片段或最后一個片段的長度，但僅適用于正交路由的鏈接。可以在節點的端口元素或鏈接上設置這些屬性。在鏈接上，屬性值優先于端口上相應屬性的值。

  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.Orthogonal, fromSpot: go.Spot.Left, toSpot: go.Spot.Right },
      new go.Binding("fromEndSegmentLength"),
      new go.Binding("toEndSegmentLength"),
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "100 50" },
    { key: "Gamma", loc: "0 100" },
    { key: "Delta", loc: "100 150" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Gamma", to: "Delta", fromEndSegmentLength: 4, toEndSegmentLength: 30 },
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

=====================================================

想要購買GoJS正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼