d3-force-pod

!NPM packagenpm-imgnpm-url !Build Sizebuild-size-imgbuild-size-url !NPM Downloadsnpm-downloads-imgnpm-downloads-url
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
}