d3.forceElastic

A spring-like force type that attracts nodes when their link is extended beyond its length at rest. The force intensity follows Hooke's law and is proportional to the extension distance. For distances less than the link's length, by default no force is applied, but a compressionFactor can be applied to add a repelling force.

The intensity of the attraction force between two nodes is determined by the extension distance (D), the elasticity of the link (E) and the simulation alpha (A), using the following formula: A*E*D. In compressed state this is further multiplied by the compressionFactor, resulting in a repelling force.

This force plugin is designed to be used with the d3-force simulation engine. It is also compatible with d3-force-3d and can function in a one, two (default) or three-dimensional space.

Quick start

import d3ForceElastic from 'd3-force-elastic';

or using a script tag

<script src="//cdn.jsdelivr.net/npm/d3-force-elastic"></script>

then

d3.forceSimulation()
  .nodes(<myNodes>)
  .force('elastic', d3.forceElastic()
    .links(<myLinks>)
    .elasticity(0.8)   
  );

API reference

| Method | Description | Default | |-----------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------:| | links([array]) | Getter/setter for the list of links connecting nodes. Each link should follow the syntax: {source: <node-id or node-object>, target: <node-id or node-object>}. | [] | | id([fn]) | Getter/setter for the node object unique id accessor function, used by links to reference nodes. | node.index | | distance([num or fn]) | Getter/setter for the link distance accessor function (fn(link)) or a constant (num) for all links. A link's distance determines the natural length of the spring at rest (not extended), after which an attraction force will be applied. | 30 | | elasticity([num or fn]) | Getter/setter for the link elasticity accessor function (fn(link)) or a constant (num) for all links. A link's elasticity determines the stiffness of the extending spring and how strongly the attractive force between two nodes is applied to them. A value of 1 represents unity, while a 0 means no force interaction. | 0.8 | | compressionFactor([num or fn]) | Getter/setter for the link compression factor accessor function (fn(link)) or a constant (num) for all links. A link's compression factor determines how much push back is applied to the nodes when the spring is in compressed state. This value is a multiplier of the link's elasticity and determines the intensity of the repelling force on compressed links. A value of 1 means the repelling force is as strong as the elastic attraction force, while a 0 means no push back. | 0 |

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!