logo GoJS教程 2019 我也要发布文档

树状图和TreeLayout


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);

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

您还可以通过使用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);

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

自动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

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

常见的TreeLayout属性

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

  setupTree(diagram);
  diagram.layout = $(go.TreeLayout,{ angle:90 });

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

该setupTree功能在上面定义。

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

  setupTree(diagram);
  diagram.layout = $(go.TreeLayout,{ angle:90,alignment:go.TreeLayout.AlignmentStart});

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

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

  setupTree(diagram);
  diagram.layout = $(go.TreeLayout,{ layerSpacing:20,nodeSpacing:0 });

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

可以对每个节点的子级进行排序。默认情况下,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 });

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

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

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

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