流程图控件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正版授权的朋友可以