Component that runs a D3 force simulation and automatically draws circles/lines to an SVG canvas according to a configurable set of nodes, links and forces.
Nodes are prevented from escaping by hard-limiting the coordinates to the boundaries of the canvas.
import d3ForcePod from 'd3-force-pod';or using a script tag
<script src="//unpkg.com/d3-force-pod/dist/d3-force-pod.min.js"></script>then
d3ForcePod()
.genNodes()
.addForce(d3.forceManyBody())
(<myDOMElement>);| Method | Description | Default |
|---|---|---|
| width([number]) | Getter/setter for the canvas width. | window.innerWidth |
| height([number]) | Getter/setter for the canvas height. | window.innerHeight |
| nodes([array]) | Getter/setter for the list of nodes. Each node should be an object with the following optional properties: { x, y, vx, vy, r }. |
[] |
| links([array]) | Getter/setter for the list of lines to draw between node pairs. Each link should follow the syntax: {source: <node index or node obj>, target: <node index or node obj>}. |
[] |
| genNodes([object]) | Convenience method for randomly generating nodes. See below for input options and defaults. | |
| addForce(fn) | Method to register a D3 force in the system. | |
| simulation() | Getter for the underlying simulation object. Can be used as an escape hatch to modify simulation parameters such as alphaDecay. | d3.forceSimulation().alphaDecay(0).velocityDecay(0) |
| nodeColor([string or fn]) | Getter/setter for the color accessor of the node circles | #900C3F |
| linkColor([string or fn]) | Getter/setter for the color accessor of the link lines | #00008B |
{
density: 0.00025, // nodes/px
xRange: [0, width], // px
yRange: [0, height], // px
radiusRange: [1, 18], // px
velocityRange: [0, 4], // px/tick
velocityAngleRange: [0, 360] // 0=right, 90=down
}