流程图控件GoJS教程：替换图和模型

---

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

点击下载GoJS最新试用版

许多应用程序将要求程序员在页面的同一内容区域上显示不同的图。这在单页Web应用程序中尤其常见。通常，您不需要删除该图并创建另一个图即可。由于图很是类似一个视图中的模型-视图架构，可以代替更换Diagram.model，也许还有其他设置，如Diagram.nodeTemplateMap或Diagram.layout。或者，您可以构建更大的模板图，以适应您希望呈现的所有模型。

下面是保留单个图表用作视图表面的示例。它加载了一个Model，一个按钮将加载一个使用不同模板的不同Model，并设置一个不同的Layout。这说明了图的重用，它比处理多个图通常更容易，更有效。这是一次最多显示一张图表的正常方法。

    // A minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3, font: '28px sans-serif' },  // some room around the text
          new go.Binding("text", "key"))
      );

    // Node template that is only used by the second model
    diagram.nodeTemplateMap.add("TypeTwo",
    $(go.Node, "Horizontal",
      $(go.Shape, "Circle", { width: 24, height: 24, strokeWidth: 0, portId: "" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 2, font: "Bold 15px sans-serif" },
        new go.Binding("text", "key"))
      )
    );

    // Another node template that is only used by the second model
    diagram.nodeTemplateMap.add("AnotherType",
      $(go.Node, "Auto",
        $(go.Shape, "Rectangle", { strokeWidth: 1, fill: 'lightyellow' },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 12, font: "12px sans-serif" },
          new go.Binding("text", "text"))
      )
    );

    var firstModel = true;
    loadModel();

    // Toggle the Diagram's Model
    var button1 = document.getElementById('button1');
    button1.addEventListener('click', function() {
      loadModel();
    });

    function loadModel() {
      if (firstModel) { // load the first model
        diagram.layout = new go.Layout(); // Simple layout
        diagram.model = new go.GraphLinksModel(
          [
            { key: "Alpha", color: "lightblue" },
            { key: "Beta", color: "lightblue" },
            { key: "Gamma", color: "lightgreen" },
            { key: "Delta", color: "lightgreen" }
          ],
          [
            { from: "Alpha", to: "Beta" },
            { from: "Gamma", to: "Delta" }
          ]);
      } else { // load the second model
        diagram.layout = $(go.TreeLayout, { angle: 90 });

        diagram.model = new go.GraphLinksModel(
        [
          { key: "One",   category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Two",   category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Three", category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Four",  category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Five",  category: "TypeTwo", color: go.Brush.randomColor() },
          { key: "Six",   category: "TypeTwo", color: go.Brush.randomColor() },
          { text: "Some comment", category: "AnotherType" }
        ],
        [
          { from: "One", to: "Two" },
          { from: "One", to: "Three" },
          { from: "Three", to: "Four" },
          { from: "Three", to: "Five" },
          { from: "Four", to: "Six" }
        ]);
      }
      firstModel = !firstModel;

    }

请注意，更改模型会破坏未保留在模型中的所有状态，例如当前选择的部件，如果没有针对它们的数据绑定，则所有节点的位置等等。可以在关联之前将它们保存在模型中。

两张图重复使用一个DIV

有时，用户希望一次处理两个或多个图并保持所有图状态。在这种情况下，您可能希望在页面上放置两个图（就像所有带有调色板的示例一样），或者您可能希望将图放入多个“选项卡”或其他某种机制中，例如Planogram示例对其进行处理四个调色板。

另外，您可能希望通过换出两个图，将它们在同一DIV中一次显示一次。您可以通过在第一个图上将Diagram.div设置为null，并在第二个图上设置Div 来交换div 。

    // A very minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Circle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          new go.Binding("text", "key"))
      );

    diagram.model = new go.GraphLinksModel([
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" }
    ], [
      { from: "Alpha", to: "Beta" },
    ]);

    var diagram2 = $(go.Diagram);

    diagram2.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "Rectangle", { fill: 'lime' }),
        $(go.TextBlock,
          { margin: 5, font: '22px sans-serif' },
          new go.Binding("text", "key"))
      );

    diagram2.model = new go.GraphLinksModel([
      { key: "BigNode1" },
      { key: "BigNode2" },
      { key: "BigNode3" },
    ], [ ]);

    var currentDiagram = diagram;

    // Toggle the Diagram within this DIV with this button
    var button2 = document.getElementById('button2');
    button2.addEventListener('click', function() {
      // Set one Diagram.div to null, and the other Diagram.div to this div
      if (currentDiagram === diagram) {
        var div = diagram.div;
        diagram.div = null;
        diagram2.div = div;
        currentDiagram = diagram2;
      } else {
        var div = diagram2.div;
        diagram2.div = null;
        diagram.div = div;
        currentDiagram = diagram;
      }


    });

 如果选择一个节点并移动它，然后来回切换图，您将看到选择和节点定位仍然存在。两个图都保留在内存中，只有Div被交换以使用一个或另一个。

永久删除图

您可能希望删除图表，并确保它不占用任何内存。为此，如果尚未在其中创建对图表或GraphObjects或工具或布局的任何其他引用，则可以编写：

  myDiagram.div = null;
  myDiagram = null; // Assumes this is the only reference to your Diagram

如果您使用过图片，则还应该清除图片缓存，GoJS创建了图片缓存以存储源URL到图片元素的映射：

  // Clear any Image references that GoJS is holding onto
  go.Picture.clearCache();

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

想要购买GoJS正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号