https://github.com/vasturiano/d3-force-pod
Component to automatically draw nodes/links in a D3 force simulation according to a set of forces
https://github.com/vasturiano/d3-force-pod
d3-force-simulation d3js force
Last synced: 8 months ago
JSON representation
Component to automatically draw nodes/links in a D3 force simulation according to a set of forces
- Host: GitHub
- URL: https://github.com/vasturiano/d3-force-pod
- Owner: vasturiano
- License: mit
- Created: 2017-09-07T06:49:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-03-21T03:31:33.000Z (about 1 year ago)
- Last Synced: 2025-09-15T09:27:15.273Z (9 months ago)
- Topics: d3-force-simulation, d3js, force
- Language: JavaScript
- Homepage: https://vasturiano.github.io/d3-force-pod/example/column/
- Size: 345 KB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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