d3-force-pod - npm explorer

d3-force-pod
==============

[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-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

``js import d3ForcePod from 'd3-force-pod';`or using a script tag`html`then`js new d3ForcePod() .genNodes() .addForce(d3.forceManyBody());`

`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: , target: }. | [] | | 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:

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

[npm-img]: https://img.shields.io/npm/v/d3-force-pod
[npm-url]: https://npmjs.org/package/d3-force-pod
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-force-pod
[build-size-url]: https://bundlephobia.com/result?p=d3-force-pod
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-force-pod
[npm-downloads-url]: https://www.npmtrends.com/d3-force-pod

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: , target: }

. | [] |
| 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:

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