Spring Layout
This is a force-directed layout that models edges as springs. Wikipedia has a good introduction to these types of layouts. It is useful for unstructured data - database schemas, mind maps, graphs, etc. Force-directed algorithms initially position nodes with a degree of randomness and so do not ever produce exactly the same result twice (try reloading this page) - for this reason it is recommended that you read the note on refresh vs re-layout
From version 5.7.0 there is a new layout - the ForceDirected layout - which is based on this layout but contains a number of placement improvements and a shorter run time. It is recommended that current users of the Spring layout switch to the ForceDirected layout, and that new users choose the ForceDirected layout over the Spring layout.
This layout is delivered in its own package - @jsplumbtoolkit/layout-spring
.
Parameters
Home > @jsplumbtoolkit/layout-spring > SpringLayoutParameters
SpringLayoutParameters interface
Options for the spring layout.
Signature:
export interface SpringLayoutParameters extends AbsoluteBackedLayoutParameters
Extends: AbsoluteBackedLayoutParameters
Properties
Property | Modifiers | Type | Description |
---|---|---|---|
c? | number | (Optional) | |
iterations? | number | (Optional) | |
k? | number | (Optional) | |
maxRepulsiveForceDistance? | number | (Optional) | |
maxVertexMovement? | number | (Optional) |
Absolute Backing
SpringLayout
extends AbsoluteLayout, which means that, by default, the layout will defer to positions that are stored in the backing data for each vertex. This is a very useful feature for the majority of applications: you do not typically want the layout to run if a human being has already taken a look at the data and perhaps moved things around to be more to their liking.
Specifying Position
The default parameters used by AbsoluteLayout
are left
and top
. So for instance you might have these nodes in your data:
nodes:[
{ id:"1", left:50, top:150, label:"One" },
{ id:"2", left:150, top:250, label:"Two" }
]
By default, the Spring layout will honour these values if they are present, rather than processing the nodes.
If you do not wish to use left
and top
, you can provide your own locationFunction
. This is discussed in the documentation for the Absolute layout.
Switching off Absolute backing
You can switch off Absolute backing via the absoluteBacked
parameter:
toolkitInstance.render(someElement, {
layout:{
type:"Spring",
options:{
absoluteBacked:false
}
}
});
Behaviour after relayout
A relayout will generate a brand new arrangement of Nodes, due to the fact that Nodes are placed randomly initially.
Behaviour after refresh
A refresh of the layout locks the positions of any vertices that were positioned in a previous run of the layout, and these vertices do not move: only vertices that have not yet been positioned by the layout algorithm will move.
Magnetization
This layout switches on magnetization by default. You can suppress this behaviour by setting magnetize:false
on your layout parameters:
toolkit.render(someElement, {
layout:{
type:"Spring",
options:{
magnetize:false
}
}
})