Balloon Layout
This layout groups vertices into clusters.
This layout is useful for unstructured data - database schemas, mind maps, graphs, etc. For a given input graph the structure of the layout will always be the same, but this layout does not extend the Absolute layout as the Spring layout does, so all vertex placement is decided upon by the layout.
NOTE: this layout is delivered in the @jsplumbtoolkit/layout-hierarchical package.
Parameters
Home > @jsplumbtoolkit/layout-hierarchical > BalloonLayoutParameters
BalloonLayoutParameters interface
Constructor parameters for a Balloon layout.
Signature:
export interface BalloonLayoutParameters extends AbstractHierarchicalLayoutParameters
Extends: AbstractHierarchicalLayoutParameters
Properties
| Property | Modifiers | Type | Description |
|---|---|---|---|
| groupPadding? | number | (Optional) Minimum distance between a group of vertices and its neighbours. Defaults to 100 pixels. |
Home > @jsplumbtoolkit/layout-hierarchical > AbstractHierarchicalLayoutParameters
AbstractHierarchicalLayoutParameters interface
Parameters for layouts that extends AbstractHierarchicalLayout.
Signature:
export interface AbstractHierarchicalLayoutParameters extends AbsoluteBackedLayoutParameters
Extends: AbsoluteBackedLayoutParameters
Properties
| Property | Modifiers | Type | Description |
|---|---|---|---|
| getChildEdges? | (node: Vertex, toolkit: JsPlumbToolkit) => Array<Edge> | (Optional) Optional function used to determine the edges to traverse to find children from some node | |
| getRootNode? | (toolkit: JsPlumbToolkit) => Array<Vertex> | (Optional) Optional. A function that is given the Toolkit instance as argument and is expected to return either a single node/group, or an array of nodes/groups, to use as the root(s) for the layout | |
| ignoreLoops? | boolean | (Optional) Defaults to true. If a loop is found during the layout it is usually ignored, unless this is set to true. | |
| ignorePorts? | boolean | (Optional) Defaults to false, meaning that ports are taken into account when figuring the list of edges from some vertex. If you set this to true, ports will be ignored and the layout will only consider edges connected directly to each vertex. | |
| multipleRoots? | boolean | (Optional) Optional, defaults to true. If false, multiple roots are not supported, and assuming you have not overridden getRootNode, the layout uses the first node found in the dataset (otherwise it still uses the result of your getRootNode function) | |
| rootNode? | Array<Vertex> | (Optional) Optional. Defines the node/group to use as the root of the tree. This may be provided either as a node/group id or as a node/group object. If this parameter is not specified and multipleRoots is not false then the layout uses the result(s) of the getRootNode function; otherwise it uses the first node/group found in the dataset. |
Example
toolkit.render(someElement, {
layout:{
type:"Balloon"
}
});
Behaviour after relayout
A relayout will generate the exact same arrangement of vertices, since this layout is deterministic. But any changes to node/group dimensions will be taken into account.
Behaviour after refresh
A refresh will generate the exact same arrangement of nodes/groups, since this layout is deterministic. But any changes to node/group dimensions will be taken into account.