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

點擊下載GoJS最新版

與節(jié)點進行編程交互

本指南將向您展示一些與GoJS節(jié)點，鏈接和模型數(shù)據(jù)進行編程交互的基本方法。在整個頁面中，我們將以以下圖表設(shè)置為起點：

var $ = go.GraphObject.make;
myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { "undoManager.isEnabled": true });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      // don't draw any outline
      { stroke: null },
      // the Shape.fill comes from the Node.data.color property
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      // leave some space around larger-than-normal text
      { margin: 6, font: "18px sans-serif" },
      // the TextBlock.text comes from the Node.data.key property
      new go.Binding("text", "key"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
]);

您可以Diagram.findNodeForKey(key)用來獲取對JavaScript中Node的引用。GoJS中的鍵值可以是字符串或數(shù)字。然后，您可以使用Node引用來檢查和操作Node。

var node = myDiagram.findNodeForKey("Alpha");

// Selects the node programmatically, rather than clicking interactively:
myDiagram.select(node);

// Outputs a JavaScript object in the developer console window.
// The format of what is output will differ per browser, but is essentially the object:
// { key: "Alpha", color: "lightblue" }
// plus some internal implementation details.
console.log(node.data);

一旦有了Node，就可以通過Node.key屬性或通過查看其data：來獲取其鍵someNode.data.key，就像可以查看任何數(shù)據(jù)屬性一樣。

節(jié)點和鏈接的集合

圖具有一些屬性和方法，這些屬性和方法返回描述零件集合的迭代器。節(jié)點和鏈接都是零件。 Diagram.nodes并分別Diagram.links返回圖中所有節(jié)點和鏈接的迭代器。 Diagram.selection返回選定零件（選定節(jié)點和選定鏈接）的迭代器。

還有一些用于通用操作的更具體的方法，例如，Diagram.findTreeRoots() 該方法返回沒有父節(jié)點的所有頂級節(jié)點的迭代器。

下一個示例使用Diagram.nodes并顯示如何遍歷集合。

// Calling Diagram.commit executes the given function between startTransaction and commitTransaction
// calls.  That automatically updates the display and allows the effects to be undone.
myDiagram.commit(function(d) {  // this Diagram

  // iterate over all nodes in Diagram
  d.nodes.each(function(node) {
    if (node.data.key === "Beta") continue; //skip Beta, just to contrast
    node.scale = 0.4; // shrink each node
  });

}, "decrease scale");

通常，我們想要操縱一個屬性，該屬性屬于Node的元素之一，也許是模板中任意深的元素。在示例圖中，每個節(jié)點都有一個Shape，如果我們想直接更改Shape的顏色，則需要對其進行引用。為了找到它，我們可以給Shape命名：

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { stroke: null, name: "SHAPE" }, // added the name property
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 6, font: "18px sans-serif" },
      new go.Binding("text", "key"))
  );

使用此按鈕，我們可以創(chuàng)建一個HTML按鈕，以更改選定節(jié)點內(nèi)部Shape的填充：

var selectionButton = document.getElementById("selectionButton");
selectionButton.addEventListener("click", function() {
  myDiagram.commit(function(d) {
    d.selection.each(function(node) {
      var shape = node.findObject("SHAPE");
      // If there was a GraphObject in the node named SHAPE, then set its fill to red:
      if (shape !== null) {
        shape.fill = "red";
      }
    });
  }, "change color");
});

使用數(shù)據(jù)綁定更改屬性和更新模型

再次查看我們的Node模板，我們將Shape.fill 屬性數(shù)據(jù)綁定到Node數(shù)據(jù)的“ color”屬性：

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { stroke: null, name: "SHAPE" },
      new go.Binding("fill", "color")),  // note this data binding
    $(go.TextBlock,
      { margin: 6, font: "18px sans-serif" },
      new go.Binding("text", "key"))
  );

var node = myDiagram.findNodeForKey("Alpha");
var shape = node.findObject("SHAPE");
shape.fill = "red";

// outputs "lightblue" - the model has not changed!
console.log(node.data.color);

但是，在某些情況下，缺乏持久性可能是一件好事。例如，如果我們只希望出于外觀目的更改顏色，例如在將鼠標(biāo)懸停在按鈕上時更改按鈕的顏色，則我們不希望修改可能保存的模型數(shù)據(jù)。

現(xiàn)在，假設(shè)我們確實要更新模型。執(zhí)行此操作的首選方法是修改模型中的數(shù)據(jù)，并依靠數(shù)據(jù)綁定自動更新Shape。但是，我們不能僅通過設(shè)置JavaScript屬性來直接修改數(shù)據(jù)。

var node = myDiagram.findNodeForKey("Alpha");

// DO NOT DO THIS!
// This would update the data, but GoJS would not be notified
// that this arbitrary JavaScript object has been modified,
// and the associated Node will not be updated appropriately
node.data.color = "red";

  var node = myDiagram.findNodeForKey("Alpha");

  // Model.commit executes the given function within a transaction
  myDiagram.model.commit(function(m) {  // m == the Model

    // This is the safe way to change model data.
    // GoJS will be notified that the data has changed
    // so that it can update the node in the Diagram
    // and record the change in the UndoManager.
    m.set(node.data, "color", "red");

  }, "change color");

  // outputs "red" - the model has changed!
  console.log(node.data.color);
  // and the user will see the red node

請注意，不再需要將Shape命名為“ SHAPE”，因為不再需要調(diào)用findObject來查找特定的Shape。數(shù)據(jù)綁定將自動更新屬性，因此我們不必自己做。

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { stroke: null },  // removed the name property
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 6, font: "18px sans-serif" },
      new go.Binding("text", "key"))
  );

提及的主題和進一步閱讀

• 數(shù)據(jù)綁定—有關(guān)更多詳細信息，請參見“數(shù)據(jù)綁定”簡介頁。
• 交易-請參閱“交易”簡介頁。
• console.log—強大的調(diào)試輔助工具，它是大多數(shù)瀏覽器開發(fā)人員工具的一部分。有關(guān)各自的開發(fā)者控制臺，請參見Chrome指南或Firefox指南。在調(diào)試的簡介頁上查看有關(guān)調(diào)試GoJS圖表的更多建議。