流程图控件GoJS教程：树状图和TreeLayout

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

GoJS现已更新至最新版本2.1.3发布，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

手动布置树结构

当然，您可以手动或以编程方式手动定位节点。在此第一个示例中，节点位置存储在节点数据中，并且存在到节点数据属性的绑定。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "Ellipse", { fill: "white" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 5 },
      $(go.Shape));
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 60" },
    { key: "Beta", loc: "100 15" },
    { key: "Gamma", loc: "200 0" },
    { key: "Delta", loc: "200 30" },
    { key: "Epsilon", loc: "100 90" },
    { key: "Zeta", loc: "200 60" },
    { key: "Eta", loc: "200 90" },
    { key: "Theta", loc: "200 120" }
  ];
  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);

您还可以通过使用TreeModel获得相同的结果。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "Ellipse", { fill: "white" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 5 },
      $(go.Shape));
 
  var nodeDataArray = [
    { key: "Alpha", loc: "0 60" },
    { key: "Beta", loc: "100 15", parent: "Alpha" },
    { key: "Gamma", loc: "200 0", parent: "Beta" },
    { key: "Delta", loc: "200 30", parent: "Beta" },
    { key: "Epsilon", loc: "100 90", parent: "Alpha" },
    { key: "Zeta", loc: "200 60", parent: "Epsilon" },
    { key: "Eta", loc: "200 90", parent: "Epsilon" },
    { key: "Theta", loc: "200 120", parent: "Epsilon" }
  ];
  diagram.model = new go.TreeModel(nodeDataArray);

自动TreeLayout

最常见的是使用TreeLayout布置树。刚分配Diagram.layout来的新实例TreeLayout。本示例还定义了setupTree此页面上后续示例中使用的功能。

function setupTree(diagram) {
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse", { fill: "white" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 5 },
      $(go.Shape));
 
  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta", parent: "Alpha" },
    { key: "Gamma", parent: "Beta" },
    { key: "Delta", parent: "Beta" },
    { key: "Epsilon", parent: "Alpha" },
    { key: "Zeta", parent: "Epsilon" },
    { key: "Eta", parent: "Epsilon" },
    { key: "Theta", parent: "Epsilon" }
  ];
  diagram.model = new go.TreeModel(nodeDataArray);
}
 
  setupTree(diagram);
  diagram.layout = $(go.TreeLayout);  // automatic tree layout

常见的TreeLayout属性

该TreeLayout.angle属性控制树木生长的大方向。它必须为零（向右），90（向下），180（向左）或270（向上）。

  setupTree（diagram）;
  diagram.layout = $（go.TreeLayout，{ angle：90 }）;

该setupTree功能在上面定义。

TreeLayout.alignment属性控制父节点相对于其子节点 的放置方式。这必须是TreeLayout上定义的Alignment ...常量之一。

  setupTree（diagram）;
  diagram.layout = $（go.TreeLayout，{ angle：90，alignment：go.TreeLayout.AlignmentStart}）;

对于树布局，所有节点均根据来自根节点的链接链的长度放置在“层”中。这些层不应与图层混淆，后者控制节点的Z顺序。该TreeLayout.layerSpacing属性控制紧密层是彼此。所述TreeLayout.nodeSpacing属性控制闭合节点是彼此在相同的层。

  setupTree（diagram）;
  diagram.layout = $（go.TreeLayout，{ layerSpacing：20，nodeSpacing：0 }）;

可以对每个节点的子级进行排序。默认情况下，TreeLayout.comparer函数比较 Part.text属性。因此，如果该属性是由节点模板绑定的数据，并且将TreeLayout.sorting属性设置 为按升序或降序排序，则每个父节点的所有子节点都将按照其文本字符串的顺序进行排序。（在此示例中，这意味着希腊字母的英文名称的字母顺序。）

  setupTree(diagram);
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("text", "key"),  // bind Part.text to support sorting
      $(go.Shape, "Ellipse", { fill: "lightblue" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );
  diagram.layout = $(go.TreeLayout, { sorting: go.TreeLayout.SortingAscending });

但是您可以提供自己的功能来订购子级，例如：

  $(go.Diagram, . . .,
    {
      layout:
          $(go.TreeLayout,
            {
              sorting: go.TreeLayout.SortingAscending,
              comparer: function(a, b) {
                  // A and B are TreeVertexes
                  var av = a.node.data.index;
                  var bv = b.node.data.index;
                  if (av < bv) return -1;
                  if (av > bv) return 1;
                  return 0;
                },
              . . .
            })
      . . .
    })

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

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