彩票走势图

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

点击下载GoJS最新版

与节点进行编程交互

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

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中的键值可以是字符串或数字。然后，您可以使用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，就像可以查看任何数据属性一样。

节点和链接的集合

图具有一些属性和方法，这些属性和方法返回描述零件集合的迭代器。节点和链接都是零件。 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");

通常，我们想要操纵一个属性，该属性属于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"))
  );

使用此按钮，我们可以创建一个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");
});

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

再次查看我们的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"))
  );

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 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”，因为不再需要调用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图表的更多建议。