流程圖控件GoJS教程：樹(shù)狀圖和TreeLayout

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

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

點(diǎn)擊下載GoJS最新試用版

手動(dòng)布置樹(shù)結(jié)構(gòu)

當(dāng)然，您可以手動(dòng)或以編程方式手動(dòng)定位節(jié)點(diǎn)。在此第一個(gè)示例中，節(jié)點(diǎn)位置存儲(chǔ)在節(jié)點(diǎn)數(shù)據(jù)中，并且存在Part.location到節(jié)點(diǎn)數(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);

您還可以通過(guò)使用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);

自動(dòng)TreeLayout

最常見(jiàn)的是使用TreeLayout布置樹(shù)。剛分配Diagram.layout來(lái)的新實(shí)例TreeLayout。本示例還定義了setupTree此頁(yè)面上后續(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

常見(jiàn)的TreeLayout屬性

該TreeLayout.angle屬性控制樹(shù)木生長(zhǎng)的大方向。它必須為零（向右），90（向下），180（向左）或270（向上）。

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

該setupTree功能在上面定義。

TreeLayout.alignment屬性控制父節(jié)點(diǎn)相對(duì)于其子節(jié)點(diǎn) 的放置方式。這必須是TreeLayout上定義的Alignment ...常量之一。

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

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

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

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

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

但是您可以提供自己的功能來(lái)訂購(gòu)子級(jí)，例如：

  $(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;
                },
              . . .
            })
      . . .
    })

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

想要購(gòu)買(mǎi)GoJS正版授權(quán)的朋友可以咨詢慧都官方客服