logo GoJS教程 2019 我也要发布文档

图表布局


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教程:图表布局

树布局

此布局将树结构图的节点放置在层(行或列)中。

流程图控件GoJS教程:图表布局

力导向布局

力导向布局将图形视作是一个物理系统,在其上以及它们之间作用有力。

流程图控件GoJS教程:图表布局

分层的有向图布局

这会将有向图的节点排列成层(行或列)。

流程图控件GoJS教程:图表布局

圆形布局

此布局将节点定位为圆形或椭圆形。

流程图控件GoJS教程:图表布局

自定义布局

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正版授权的朋友可以咨询慧都官方客服

流程图控件GoJS教程:图表布局