GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

您可以以編程方式構建節點和鏈接圖。但GoJS提供了一種以更具說明性的方式構建圖表的方法。您只提供圖表所需的節點和鏈接數據（即模型）以及自動復制到圖表中的零件實例（即模板）?？梢酝ㄟ^節點和鏈接數據的屬性來參數化這些模板。

使用代碼構建圖表

讓我們嘗試構建兩個節點并用鏈接連接它們。這是一種方法：

 var node1 =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "lightblue" }),
      $(go.TextBlock,
        { text: "Alpha",
          margin: 5 })
    )
  diagram.add(node1);
 
  var node2 =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "pink" }),
      $(go.TextBlock,
        { text: "Beta",
          margin: 5 })
    );
  diagram.add(node2);
 
  diagram.add(
    $(go.Link,
      { fromNode: node1, toNode: node2 },
      $(go.Shape)
    ));

這會產生一個漂亮，簡單的圖表。如果拖動其中一個節點，您將看到該鏈接仍然與其連接。

雖然這種構建圖表的方式可行，但在創建大圖時，它不會很好地擴展。通常，您需要不同數量的節點，每個節點與其他節點非常相似。最好分享節點的結構，但參數化一些值應該變化的東西。

一種可能性是將代碼構建到一個函數中，該函數返回一個完全構造的Node，包括其可視樹中的所有Panel和其他GraphObject。您可能希望參數化該函數，以便提供所需的字符串和顏色以及圖形和圖像URL。然而，這種方法非常特別：系統很難知道如何自動調用這些功能以便按需創建新節點或新鏈接。此外，當您的應用程序數據動態更改時，您將如何使用此類函數更新現有節點和鏈接中現有對象的屬性，而不會無效地重新創建所有內容？如果您希望在應用程序數據發生變化時自動更新任何內容/所有內容，系統將如何知道該怎么做？

這個圖表構建代碼也比管理節點引用需要更麻煩，以便您可以將它們鏈接起來。這類似于在代碼中構建節點的可視樹時必須使用臨時命名變量并在需要時引用它們時的早期問題。

我們要尋找的是將所有節點的外觀，定義和構造與描述每個特定節點的獨特方面所需的應用程序數據分開。

使用模型和模板

實現節點外觀與節點數據分離的一種方法是使用數據模型和節點模板。模型基本上只是一個數據集合，它包含每個節點和每個鏈接的基本信息。模板基本上只是一個可以復制的部分 ; 您將擁有Node和Link的不同模板。

事實上，一個Diagram已經有非常簡單的節點和鏈接默認模板。如果要自定義圖中節點的外觀，可以通過設置Diagram.nodeTemplate替換默認節點模板。

要自動使用模板，請提供一個模型，其中包含每個節點的數據和每個鏈接的數據。GraphLinksModel保持節點的數據和鏈接數據作為值的集合（實際上陣列） GraphLinksModel.nodeDataArray和GraphLinksModel.linkDataArray。然后設置Diagram.model屬性，以便該圖可以為所有節點數據創建Node，為所有鏈接數據創建Link。

模型解釋和維護數據之間的引用。期望每個節點數據具有唯一的鍵值，以便可以可靠地解析對節點數據的引用。模型還管理動態添加和刪除數據。

模型中的節點數據和鏈接數據可以是任何JavaScript對象。您可以決定這些對象具有哪些屬性 - 添加您的應用程序所需的數量。由于這是JavaScript，您甚至可以動態添加屬性。GoJS模型假設存在數個屬性，例如“密鑰”（在節點數據上）和“類別”和“從”和“到”（后兩個在鏈接數據上）。但是，您可以通過設置名稱以“... Property”結尾的模型屬性來告訴模型使用不同的屬性名稱。

節點數據對象通常在“key”屬性中具有其節點的唯一鍵值。目前，節點數據鍵必須是字符串或數字。您可以通過Node.key屬性或通過獲取Node的密鑰someNode.data.key。

讓我們創建一個圖表，提供最少量的必要信息。特定節點數據已放入JavaScript對象數組中。我們在鏈接數據對象的單獨數組中聲明鏈接關系。每個鏈接數據通過使用其鍵來保存對節點數據的引用。通常，引用是“from”和“to”屬性的值。

  var nodeDataArray = [
    { key：“Alpha” }，
    { key：“Beta” }
  ]。
  var linkDataArray = [
    { from：“Alpha”，to：“Beta” }
  ]。diagram.model
  = new go.GraphLinksModel（nodeDataArray，linkDataArray）;

這導致兩個節點和一個鏈接，但節點不按我們想要的方式顯示。因此，我們將節點模板定義為我們在上面執行的特定節點構造的概括。  

diagram.nodeTemplate =  // provide custom Node appearance
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "white" }),
      $(go.TextBlock,
        { text: "hello!",
          margin: 5 })
    );
 
  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

現在圖表看起來更好，但節點尚未參數化 - 它們都是相同的！我們可以通過使用數據綁定來實現該參數化。

使用數據綁定參數化節點

數據綁定是一種聲明性聲明，應該使用一個對象的屬性值來設置另一個對象的屬性值。

在這種情況下，我們希望確保TextBlock.text屬性獲取相應節點數據的“鍵”值。我們希望確保將Shape.fill屬性設置為相應節點數據的“color”屬性值給出的顏色/畫筆。

我們可以通過創建Binding對象并將它們與目標GraphObject相關聯來聲明這樣的數據綁定。通過調用GraphObject.bind以編程方式執行此操作。但是當使用go.GraphObject.make時，這會在傳入Binding時自動發生。

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "white" },  // default Shape.fill value
        new go.Binding("fill", "color")),  // binding to get fill from nodedata.color
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))  // binding to get TextBlock.text from nodedata.key
    );
 
  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },  // note extra property for each node data: color
    { key: "Beta", color: "pink" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

現在我們有與以前相同的圖表結果，但它以更一般的方式實現。您可以輕松添加更多節點和鏈接數據以構建更大的圖表。您可以輕松更改所有節點的外觀而無需修改數據。

實際上，您可能會注意到鏈接不同：它有一個箭頭。當我們第一次使用代碼構建此圖時，沒有包含箭頭。但是默認的Diagram.linkTemplate包含一個箭頭，在本例中我們沒有用自定義鏈接模板替換鏈接模板。

請注意，上面模板中Shape.fill的值獲取兩次值。首先它被設置為“白色”。然后綁定將它設置為節點數據的“顏色”屬性具有的任何值。能夠指定在節點數據沒有“顏色”屬性或者獲得該值時出錯的情況下保留的初始值可能是有用的。

在這一點上，我們也可以更準確地了解模板是什么。模板是一個部分，可能有一些數據綁定以及本身不是圖中，但可能被復制到創建要添加到圖的部分。

模板定義

所有預定義模板的實現都在Extensions目錄的Templates.js中提供。您可能希望在創建自己的模板時復制和修改這些定義。

這些定義可能不是GoJS中實際標準模板實現的最新描述。

各種模型

模型是一種將數據對象集合解釋為抽象圖形的方式，其中各種關系由數據屬性和模型所做的假設確定。最簡單的模型Model只能保存“部件”而它們之間沒有任何關系 - 沒有鏈接或組。但該模型類充當其他類型模型的基類。

GraphLinksModel

您在上面看到的模型GraphLinksModel實際上是最常見的一種。它為每個鏈接使用單獨的鏈接數據對象支持鏈接關系。鏈接可以連接的節點沒有固有的限制，因此允許自反和重復鏈接。鏈接也可能導致圖中的循環。但是，您可以通過設置各種屬性（例如Diagram.validCycle）來阻止用戶繪制此類鏈接。如果您希望鏈接看起來與鏈接而不是節點連接，則可以通過具有屬于鏈接的特殊節點（稱為“標簽節點”）來實現，這些節點沿著鏈接的路徑排列。與文本標簽在鏈接上排列的方式相同。

此外，GraphLinksModel還支持在節點內識別邏輯上和物理上不同的連接對象（稱為“端口”）。因此，單個鏈路可以與特定端口連接而不是與整個節點連接?！?nbsp;鏈接點和端口”頁面更深入地討論了此主題。

一個GraphLinksModel還支持組成員關系。任何部分最多只能屬于一個集團 ; 任何群體都不能直接或間接地包含在內。

TreeModel

一種更簡單的模型TreeModel僅支持形成樹形結構圖的鏈接關系。沒有單獨的鏈接數據，因此沒有“linkDataArray”。樹中固有的父子關系由子節點數據上的額外屬性確定，該屬性通過其鍵引用父節點。如果該屬性（其名稱默認為“parent”）未定義，則該數據的相應節點是樹根。每個鏈接仍然是數據綁定，但鏈接的數據是子節點數據。

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "Ellipse" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );
 
  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", parent: "Alpha", color: "yellow" },  // note the "parent" property
    { key: "Gamma", parent: "Alpha", color: "orange" },
    { key: "Delta", parent: "Alpha", color: "lightgreen" }
  ];
  diagram.model = new go.TreeModel(nodeDataArray);

許多面向樹的樣本使用TreeModel而不是GraphLinksModel。但僅僅因為您的圖形是樹形結構并不意味著您必須使用TreeModel。您可能會發現您的數據是使用單獨的“表”來組織的，該表定義了鏈接關系，因此使用GraphLinksModel是最自然的?；蛘吣赡芟胍褂肨reeModel不支持的其他功能。

修改模型

如果要以編程方式添加或刪除節點，則可能需要調用 Model.addNodeData和Model.removeNodeData方法。如果您只有唯一的鍵值，請使用Model.findNodeDataForKey方法查找特定的節點數據對象。您還可以調用Model.copyNodeData來創建節點數據對象的副本，然后可以將其修改并傳遞給Model.addNodeData。

它不能簡單地修改Model.nodeDataArray，因為GoJS軟件不會被通知有關任何JavaScript數組的任何更改，因此無法根據需要添加或刪除Node或其他部分。

同樣，它不能簡單地修改節點數據對象的屬性。任何依賴于屬性的Binding都不會被通知任何更改，因此它將無法更新其目標GraphObject屬性。例如，設置color屬性不會導致Shape更改顏色。

  var data = myDiagram.model.findNodeDataForKey("Delta");
    // This will NOT change the color of the "Delta" Node
    if (data !== null) data.color = "red";

相反，您需要調用Model.setDataProperty來修改模型中的對象。

 var data = myDiagram.model.findNodeDataForKey("Delta");
    // This will update the color of the "Delta" Node
    if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");

當JavaScript數組或對象已經是模型的一部分時，需要 調用模型方法，如Model.addNodeData或Model.setDataProperty。首次為Model.nodeDataArray構建對象數組 或將JavaScript對象初始化為新節點數據對象時，不需要此類調用。但是，一旦數據成為模型的一部分，就必須調用模型的方法來實現更改。

保存和加載模型

GoJS不要求您以任何特定介質或格式保存模型。但由于這是JavaScript和JSON是最流行的數據交換格式，我們確實可以輕松地以JSON格式編寫和讀取模型。

只需調用Model.toJson即可生成表示模型的字符串。調用靜態方法Model.fromJson來構造并初始化給定Model.toJson生成的字符串的模型。許多示例都證明了這一點 - 搜索名為“save”和“load”的JavaScript函數。這些函數中的大多數都在頁面本身上編寫和讀取TextArea，以便您可以查看和修改JSON文本，然后加載它以獲取新圖表。但是在編輯時請小心，因為JSON語法非常嚴格，任何語法錯誤都會導致這些“加載”函數失敗。

JSON格式的文本對您可以表示的數據類型有嚴格的限制，無需額外的假設。要保存和加載您在節點數據（或鏈接數據）上設置的任何數據屬性，它們需要滿足以下要求：

• 該屬性是可枚舉的，其名稱不以下劃線開頭（您可以使用以下劃線開頭的屬性名稱，但不會保存它們）

• 屬性值未定義且不是函數（JSON不能忠實地保存函數）

• 模型知道如何將屬性值轉換為JSON格式（數字，字符串，JavaScript數組或純JavaScript對象）

• 作為對象或數組的屬性值形成樹結構 - 沒有共享或循環引用

Model.toJson和Model.fromJson還將處理Point，Size，Rect，Spot，Margin，Geometry和非模式Brush es的實例 。但是，我們建議您使用這些類parse和stringify靜態函數將這些對象存儲在其字符串表示中。

因為您使用的是JavaScript，所以向您的節點數據添加數據屬性是微不足道的。這允許您將所需的任何信息與每個節點相關聯。但是，如果您需要將某些信息與模型相關聯，即使根本沒有節點數據也會存在，您可以向Model.modelData對象添加屬性。該對象的屬性將被寫入Model.toJson和閱讀Model.fromJson，就像節點數據對象被寫入和讀取。

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

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

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