Panels

Panels 是个 GraphObjects，他们 hold 其他 GraphObjects 作为他们的元素。Panel负责确定它的所有元素的大小和位置。每个 Panel 建立自己的坐标系。Panel里的元素按顺序绘制，从而确定这些元素的Z顺序。

GoJS的panel有：

• Panel.Position
• Panel.Vertical
• Panel.Horizontal
• Panel.Auto
• Panel.Spot
• Panel.Table (see the next section about Table Panels)
• Panel.Viewbox
• Panel.Link (see the section about Link Labels)
• Panel.Grid (see the section about Grid Patterns)
• Panel.Graduated (see the section about Graduated Panels)

Layouts

1 Default Layout

如果不设置Diagram.layout的值，那么它默认就有一个Layout实例。到目前为止，您看到的许多示例都没有设置diagram.layout，因此使用默认布局。

这种布局不同于所有其他布局子类，因为它只设置不具有位置的节点的位置——即graphobject.actualbounds的x或y是NaN的位置。它将保留未修改的所有具有已定义位置的节点，并忽略所有链接。

2 Automatic Layouts

GoJS提供的几种自动布局：

• GridLayout
• TreeLayout
• ForceDirectedLayout
• LayeredDigraphLayout
• CircularLayout

3 Layout Usage

使用方式一（Diagram.layout）：

diagram.layout = new go.ForceDirectedLayout();

使用方式二（GraphObject.make）：

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

提示：我们建议尽可能使用graphhobject.make，因为错误检查作用于 property names。

4 Custom Layouts

除了上面介绍的自动布局外，GoJS允许创建自定义布局。

Performance

当图表仅限于几百个节点和链接时，特别是在桌面上，为图表获得良好的性能并不需要您付出任何努力。然而，当你的应用程序可能处理数千或数万个节点和链接时，你可能需要调整你的实现以避免昂贵的功能。

1 Constructing and Sizing Nodes

尽可能使用更简单的 panel。“Table”面板功能比较丰富，但如果可以尽量使用”Horizontal”/”Vertical”/”Spot”/”Auto” 这些轻量级的面板。
如果您有一个Picture并且事先知道它的预期大小，那么最好设置它的GraphObject.desiredSize（或GraphObject.width和GraphObject.height），这样一旦图像加载就不必重新测量它。 当节点更改大小时，可能需要再次执行布局，因此具有固定大小的节点有助于减少图表布局。 通常，在节点元素（尤其是图片）上设置GraphObject.desiredSize将加快GoJS测量和排列构成节点或链接的面板的速度。

2 Layouts

GridLayout 和 TreeLayout 速度快，LayeredDigraphLayout 速度慢。

3 Virtualization

对于一个含有123456个节点的diagram，就需要用虚拟化技术了，虚拟化仅会构造与视区相交的节点和链接，因此加载和渲染速度相当快。

4 其他注意事项

您可以根据缩放级别使用多个模板。如果缩小到足够远（因此屏幕上有很多节点），则可以切换到简化的模板，以便渲染（平移、拖动等时）更快。不过，切换模板的过程有一个性能成本，因为部件必须自己重新构建。