Skip to main content

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

note

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.

Spring layout
note

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​

PropertyModifiersTypeDescription
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
    }
  }
})