流程圖控件GoJS教程：圖表布局

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

GoJS現已更新至最新版本2.1發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

圖表布局

一般而言，“布局”是確定對象集合大小和位置的一種方法。HTML的HTML元素具有自己的布局。在GoJS你已經看到了面板布局的例子很多，如汽車或表，其大小和位置GraphObject一個內小號面板。 GoJS還提供了Diagram布局，用于在Diagram或Group內定位Node并路由Link。

自然，每個圖Layout的主要目的通常是通過調用Part.move來定位節點。但是，布局還可以通過在每個Link上設置屬性來導致自定義路由。例如，TreeLayout還通過根據TreeLayout.angle設置Link.fromSpot和Link.toSpot來確保按預期方向路由鏈接 。（但是，可以通過設置TreeLayout.setsPortSpot和TreeLayout.setsChildPortSpot來禁用該行為。對于其他一些布局也是如此。）

圖的布局可以通過幾種方式完成。手動布局的出現是因為用戶移動了節點，從而為這些節點建立了新的位置。這樣的布局可以以某種持久數據格式保存，然后使用數據綁定或代碼分配來加載。當執行某些代碼來設置零件位置或位置時，就會發生程序化布局。自動布局是由Layout類或其子類實現的程序化布局。

默認布局

Diagram.layout的值默認的實例布局。這種布局與所有其他布局子類不同，因為它僅設置尚未具有位置的節點的位置，即GraphObject.actualBounds的X或Y為NaN。它將保留位置已定義的所有節點不變，并忽略所有鏈接。

到目前為止，您看到的許多示例都未設置Diagram.layout，因此使用默認布局。一些示例數據將Part.location或GraphObject.position綁定到數據屬性。這些示例基本上是使用手動布局，但是節點位置來自節點數據，而不是來自用戶的布置。

但是，許多示例僅允許Layout類的標準行為將位置按節點在布局中可見的順序分配給節點。這些示例展示了自動布局行為。

自動版面

GoJS提供了幾種自動布局，包括：

• 網格布局

• 樹形布局

• ForceDirectedLayout

• LayeredDigraphLayout

• 環形布局

這些布局中的每一個都有示例，展示了設置各種詳細布局屬性的效果：

• GridLayout示例

• TreeLayout示例

• ForceDirectedLayout示例

• LayeredDigraphLayout示例

• CircularLayout示例

在介紹頁面和示例中，您將看到許多通過設置Diagram.layout屬性來利用自動布局的示例。

布局用法

您可以在JavaScript語句中設置Diagram.layout：

diagram.layout = new go.ForceDirectedLayout（）;

或者，您可以使用GraphObject，make初始化該屬性：

var diagram = $(go.Diagram, "myDiagramDiv",
                {
                  layout: $(go.TreeLayout,
                            { angle: 90, nodeSpacing: 10, layerSpacing: 30 })
                });

我們建議您盡可能使用GraphObject.make，因為會對其屬性名稱進行錯誤檢查。

網格布局

一個簡單的布局，用于以類似網格的形式放置節點。

樹布局

此布局將樹結構圖的節點放置在層（行或列）中。

力導向布局

力導向布局將圖形視作是一個物理系統，在其上以及它們之間作用有力。

分層的有向圖布局

這會將有向圖的節點排列成層（行或列）。

圓形布局

此布局將節點定位為圓形或橢圓形。

自定義布局

GoJS允許創建自定義布局。

布局無效

當布局執行完其節點的定位并可能路由了其鏈接時，該布局被視為“有效”。但是，某些更改會導致布局變為“無效”，從而使布局在不久的將來再次執行。由于布局的計算量可能很大，因此，一旦布局無效，就不會立即執行自動布局。相反，它們通常在交易結束時執行。

布局失效的最常見原因是：節點或鏈接已從布局負責的節點和鏈接的集合中添加或刪除，或者因為節點或鏈接的可見性已更改，或者因為節點的大小已更改。如果您不希望在發生這樣的更改時發生自動布局，則將Layout.isOngoing設置為false 可能是最簡單的。

另一種常見情況是，您已將Diagram.layout設置為某種布局，但您希望加載包含手動定位或調整后的節點位置的圖（模型）。該綁定的Part.location到模型的數據是有效的，但是當加載后立即進行布局的位置都將丟失。通過將Layout.isInitial設置為false 可以避免這種情況 。在初始布局之后，除非您還將Layout.isOngoing設置為false ，否則通過添加或刪除或更改節點或鏈接的可見性或更改節點大小，布局可能仍然無效。當Layout.isInitial和Layout.isOngoing都同時都是假的，你仍然可以明確地導致布局通過調用發生Layout.invalidateLayout或致電Diagram.layoutDiagram一個true說法。

例如，在編輯器中，在Node.location上具有TwoWay綁定以保存手動調整的節點位置是司空見慣的。這意味著保存的模型將為所有節點保存位置。但是，如果創建的所有節點數據對象都沒有真實位置的新模型，則希望在加載模型時首先執行布局。您可以通過設置實現這一目標Layout.isInitial為假（和可選Layout.isOngoing為false，如果這是你想要什么，當用戶添加或刪除節點或鏈路），然后執行一個“InitialLayoutCompleted” DiagramEvent偵聽決定的布局是否需要。決定可能是查看添加到Model.modelData的標志。或者，您可以查看所有節點以確保其位置具有真實值：

$(go.Diagram, . . .,
  {
    . . .,
    layout: $(go.TreeLayout, { isInitial: false, isOngoing: false }, . . .),
    "InitialLayoutCompleted": function(e) {
      // if not all Nodes have real locations, force a layout to happen
      if (!e.diagram.nodes.all(function(n) { return n.location.isReal(); })) {
        e.diagram.layoutDiagram(true);
      }
    }
  })

但是，如果您不想更改特定的節點或鏈接以導致自動布局，但又希望其他節點或鏈接無效，則可以將Part.layoutConditions屬性設置為部件 “布局...” 的組合符合您需求的標志。最常見的是不希望為Part.LayoutNodeSized條件設置布局：

  $（go.Node，..，
    { layoutConditions：go.Part.LayoutStandard＆?go.Part.LayoutNodeSized}，
    ..
  ）

保持不可見或位于Layer.isTemporary圖層中的零件也永遠不會使任何布局無效。

最后，可以將Part.isLayoutPositioned設置為false，以使Layout完全忽略該Part。但是您將必須確保Part確實具有真實的Part.location，因為沒有布局會為您設置它。沒有實際位置，該零件將在圖中的任何位置都不可見。此外，如果節點將isLayoutPositioned設置為false，則布局不僅會忽略該節點，還會忽略與該節點連接的所有鏈接。因為節點不會被布局移動，所以它可能與布局的節點和鏈接重疊。

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

想要購買GoJS正版授權的朋友可以