流程圖控件GoJS教程：樹狀圖和TreeLayout

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

GoJS現(xiàn)已更新至最新版本2.1.3發(fā)布，修復(fù)了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

手動布置樹結(jié)構(gòu)

當然，您可以手動或以編程方式手動定位節(jié)點。在此第一個示例中，節(jié)點位置存儲在節(jié)點數(shù)據(jù)中，并且存在到節(jié)點數(shù)據(jù)屬性的綁定。

  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獲得相同的結(jié)果。

  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此頁面上后續(xù)示例中使用的功能。

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屬性控制父節(jié)點相對于其子節(jié)點 的放置方式。這必須是TreeLayout上定義的Alignment ...常量之一。

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

對于樹布局，所有節(jié)點均根據(jù)來自根節(jié)點的鏈接鏈的長度放置在“層”中。這些層不應(yīng)與圖層混淆，后者控制節(jié)點的Z順序。該TreeLayout.layerSpacing屬性控制緊密層是彼此。所述TreeLayout.nodeSpacing屬性控制閉合節(jié)點是彼此在相同的層。

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

可以對每個節(jié)點的子級進行排序。默認情況下，TreeLayout.comparer函數(shù)比較 Part.text屬性。因此，如果該屬性是由節(jié)點模板綁定的數(shù)據(jù)，并且將TreeLayout.sorting屬性設(shè)置 為按升序或降序排序，則每個父節(jié)點的所有子節(jié)點都將按照其文本字符串的順序進行排序。（在此示例中，這意味著希臘字母的英文名稱的字母順序。）

  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正版授權(quán)的朋友可以