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

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

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

點擊下載GoJS最新試用版

圖表布局

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

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

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

默認布局

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

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

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

自動版面

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

• 網(wǎng)格布局

• 樹形布局

• ForceDirectedLayout

• LayeredDigraphLayout

• 環(huán)形布局

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

• GridLayout示例

• TreeLayout示例

• ForceDirectedLayout示例

• LayeredDigraphLayout示例

• CircularLayout示例

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

布局用法

您可以在JavaScript語句中設(shè)置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，因為會對其屬性名稱進行錯誤檢查。

網(wǎng)格布局

一個簡單的布局，用于以類似網(wǎng)格的形式放置節(jié)點。

樹布局

此布局將樹結(jié)構(gòu)圖的節(jié)點放置在層（行或列）中。

力導(dǎo)向布局

力導(dǎo)向布局將圖形視作是一個物理系統(tǒng)，在其上以及它們之間作用有力。

分層的有向圖布局

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

圓形布局

此布局將節(jié)點定位為圓形或橢圓形。

自定義布局

GoJS允許創(chuàng)建自定義布局。

布局無效

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

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

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

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

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

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

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

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

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

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

想要購買GoJS正版授權(quán)的朋友可以