流程图控件GoJS教程：如何进行GraphObject操作

本指南将向您展示一些与GoJS节点，链接和模型数据进行编程交互的基本方法。在整个页面中，我们将以以下图表设置为起点。

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

GoJS最新版

与节点进行编程交互

本指南将向您展示一些与GoJS节点，链接和模型数据进行编程交互的基本方法。在整个页面中，我们将以以下图表设置为起点：

var $ = go.GraphObject.make;myDiagram =  $(go.Diagram, "myDiagramDiv",    { "undoManager.isEnabled": true });// define a simple Node templatemyDiagram.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

您可以Diagram.findNodeForKey(key)用来获取对JavaScript中Node的引用。GoJS中的键值可以是字符串或数字。然后，您可以使用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);

但是，如果没有节点数据使用该键值，则findNodeForKey可能会返回null。同样，它仅查看模型数据以查找使用给定键值的节点数据，并从中找到图中的相应节点。它不查看节点内任何TextBlock的文本值，因此即使根本没有显示文本，它也可以工作。

一旦有了Node，就可以通过Node.key属性或通过查看其data：来获取其键someNode.data.key，就像可以查看任何数据属性一样。

节点和链接的集合

图具有一些属性和方法，这些属性和方法返回描述零件集合的迭代器。节点和链接都是零件。 Diagram.nodes并分别Diagram.links返回图中所有节点和链接的迭代器。 Diagram.selection返回选定零件（选定节点和选定链接）的迭代器。

还有一些用于通用操作的更具体的方法，例如，Diagram.findTreeRoots() 该方法返回没有父节点的所有顶级节点的迭代器。

下一个示例使用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");

结果，除了Beta以外，我们的节点规模非常小：

命名为GraphObjects和Panel.findObject

通常，我们想要操纵一个属性，该属性属于Node的元素之一，也许是模板中任意深的元素。在示例图中，每个节点都有一个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"))  );

名称使我们能够使用轻松地在Panel（所有节点也是Panel）内找到GraphObjects Panel.findObject，这将从该面板开始搜索Panel的可视树。因此，当我们有一个Node的引用时，我们可以调用someNode.findObject(“SomeName”) 来搜索该节点中的命名对象。如果找到，则它将返回对已命名GraphObject的引用null。

使用此按钮，我们可以创建一个HTML按钮，以更改选定节点内部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");});

选择一些节点；然后单击此处更改选定节点内的Shape.fill

使用数据绑定更改属性和更新模型

再次查看我们的Node模板，我们将Shape.fill 属性数据绑定到Node数据的“ 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"))  );

更改fill节点内部的Shape属性不会像当前Node模板那样更新模型数据。

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

在某些情况下，这是不希望的。当我们希望更改在保存和加载后继续存在时，我们也希望更新模型数据。

但是，在某些情况下，缺乏持久性可能是一件好事。例如，如果我们只希望出于外观目的更改颜色，例如在将鼠标悬停在按钮上时更改按钮的颜色，则我们不希望修改可能保存的模型数据。

现在，假设我们确实要更新模型。执行此操作的首选方法是修改模型中的数据，并依靠数据绑定自动更新Shape。但是，我们不能仅通过设置JavaScript属性来直接修改数据。

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 appropriatelynode.data.color = "red";

相反，我们应该使用方法设置data属性 Model.set(data, propertyName, propertyValue)。

  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”，因为不再需要调用findObject来查找特定的Shape。数据绑定将自动更新属性，因此我们不必自己做。

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

提及的主题和进一步阅读

• 数据绑定—有关更多详细信息，请参见“数据绑定”简介页。
• 交易-请参阅“交易”简介页。
• console.log—强大的调试辅助工具，它是大多数浏览器开发人员工具的一部分。有关各自的开发者控制台，请参见Chrome指南或Firefox指南。在调试的简介页上查看有关调试GoJS图表的更多建议。

您可能需要阅读更多教程，例如Learn GoJS教程。以及交互教程。您也可以在YouTube上观看教程。

想要购买GoJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：