d3-force-pod

1.0.3 • Public • Published

d3-force-pod

NPM package Build Size NPM Downloads

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
}

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.36latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.36
1.0.20
1.0.10
1.0.00
0.9.140
0.9.130
0.9.121
0.9.110
0.9.100
0.9.90
0.9.80
0.9.70
0.9.60
0.9.50
0.9.40
0.9.30
0.9.20
0.9.10
0.9.00
0.8.20
0.8.00
0.7.00
0.6.10
0.6.01
0.5.00
0.4.00
0.3.00
0.2.00
0.1.10
0.1.00

Package Sidebar

Install

npm i d3-force-pod

Weekly Downloads

8

Version

1.0.3

License

MIT

Unpacked Size

222 kB

Total Files

7

Last publish

Collaborators

  • vasturiano