流程图控件GoJS教程：树状图的分支设置

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

点击下载GoJS最新试用版

SubTrees

树形图可能会变得非常大。简化图的一种方法是隐藏树的分支。“折叠”树节点意味着不显示其所有子节点及其链接，并递归折叠所有具有子节点的子节点。

要折叠树中的节点，请将Node.isTreeExpanded设置为false。为了确保它被扩展，将该属性设置为true。您不应在不是GraphObject.visible的Node上将此属性设置为true 。

通常，在节点上提供一个按钮以允许用户根据需要折叠和展开子树。 GoJS通过提供一种预定义的面板，称为“ TreeExpanderButton”，使该面板易于实现，该面板用作折叠和展开节点子树的按钮。此按钮更改子树除节点本身以外的所有部分的可见性。

单击扩展器按钮也会使对节点负责的布局无效。折叠子树通常会导致较大的空白区域，而展开子树通常会导致节点重叠，因此应再次执行新的布局以使树看起来更好。

  diagram.nodeTemplate =
    $(go.Node, "Horizontal",
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse", { fill: null }),
        $(go.TextBlock,
          new go.Binding("text", "key"))
      ),
      $("TreeExpanderButton")
    );
 
  diagram.layout = $(go.TreeLayout);
 
  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Gamma" },
    { from: "Beta", to: "Delta" },
    { from: "Alpha", to: "Epsilon" },
    { from: "Epsilon", to: "Zeta" },
    { from: "Epsilon", to: "Eta" },
    { from: "Epsilon", to: "Theta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

请注意，如果先折叠“ Beta”节点，然后折叠“ Alpha”根节点，然后再展开“ Alpha”节点，则“ Beta”节点将保持折叠状态，而“ Epsilon”节点将保持展开状态。这是因为折叠操作会记住子树内节点的状态，即属性Node.wasTreeExpanded。通过子树递归时，扩展操作会尊重该属性的值。

您可能还想从树上开始大部分或完全崩溃。首先，在模板中将Node.isTreeExpanded设置为false。这将仅显示树的根。其次，如果要显示树的三个级别，请调用Node.expandTree。

  diagram.nodeTemplate =
    $(go.Node, "Horizontal",
      { isTreeExpanded: false },  // by default collapsed
      $(go.Panel, "Auto",
        $(go.Shape, "Ellipse", { fill: null }),
        $(go.TextBlock,
          new go.Binding("text", "key"))
      ),
      $("TreeExpanderButton")
    );
 
  diagram.layout = $(go.TreeLayout);
 
  // After the nodes and links have been created,
  // expand each of the tree roots to 3 levels deep.
  diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
      e.diagram.findTreeRoots().each(function(r) { r.expandTree(3); });
    });
 
  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" },
    { key: "Iota" }, { key: "Kappa" }, { key: "Lambda" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Gamma" },
    { from: "Beta", to: "Delta" },
    { from: "Alpha", to: "Epsilon" },
    { from: "Epsilon", to: "Zeta" },
    { from: "Epsilon", to: "Eta" },
    { from: "Eta", to: "Theta" },
    { from: "Gamma", to: "Iota" },
    { from: "Iota", to: "Kappa" },
    { from: "Iota", to: "Lambda" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

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

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

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