Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

d3-force-pod

0.9.8 • Public • Published

d3-force-pod

NPM package Build Size Dependencies

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

d3ForcePod = require('d3-force-pod');

or even

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

Install

npm i d3-force-pod

DownloadsWeekly Downloads

37

Version

0.9.8

License

MIT

Unpacked Size

195 kB

Total Files

8

Last publish

Collaborators

  • avatar