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

您可以在GoJS中构建的图形种类没有限制。但是最常见的一种图形‘树状图’。一棵树是一个图，其中每个节点最多可以有一个“树父节点”，并且最多有一个连接到该父节点的链接，并且图中没有循环。

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

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

GoJS最新试用版

手动布置树结构

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

  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正版授权的朋友可以咨询官方客服

标签：