D3-force-pod NPM

d3-force-pod

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.

Quick start

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>);

API reference

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

genNodes(options) defaults:

{
    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
}