|
| 1 | +d3.forceSlope |
| 2 | +============= |
| 3 | + |
| 4 | +[![NPM package][npm-img]][npm-url] |
| 5 | +[![Build Size][build-size-img]][build-size-url] |
| 6 | +[![NPM Downloads][npm-downloads-img]][npm-downloads-url] |
| 7 | + |
| 8 | +A force that quantizes the slopes of all links to a predetermined set of angles. For every link between two nodes, the plugin calculates the current slope, snaps it to the nearest angle (based on a specified number of discrete angles), and then applies a spring-like force to adjust the nodes accordingly. This ensures that all links align along one of the defined slopes, making the layout visually structured and often easier to interpret. |
| 9 | + |
| 10 | +This force plugin is designed to be used with the [d3-force](https://github.com/d3/d3-force) simulation engine. |
| 11 | + |
| 12 | +## Quick start |
| 13 | + |
| 14 | +```js |
| 15 | +import d3ForceSlope from 'd3-force-slope'; |
| 16 | +``` |
| 17 | +or using a *script* tag |
| 18 | +```html |
| 19 | +<script src="//cdn.jsdelivr.net/npm/d3-force-slope"></script> |
| 20 | +``` |
| 21 | +then |
| 22 | +```js |
| 23 | +d3.forceSimulation() |
| 24 | + .nodes(<myNodes>) |
| 25 | + .force('slope-quantize', d3.forceSlope(<myLinks>)); |
| 26 | +``` |
| 27 | + |
| 28 | +## API reference |
| 29 | + |
| 30 | +| Method | Description | Default | |
| 31 | +|-----------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------:| |
| 32 | +| <b>links</b>([<i>array</i>]) | Sets or gets the list of links connecting nodes. Each link should follow the syntax: `{source: <node-id or node-object>, target: <node-id or node-object>}`. | [] | |
| 33 | +| <b>id</b>([<i>fn</i>]) | Sets or gets the node object unique id accessor function, used by links to reference nodes. | `node.index` | |
| 34 | +| <b>numAngles</b>([<i>num</i>]) | Sets or gets the number of possible angles into which the link slopes are quantized. Increase or decrease this to change the granularity of the slope snapping. | 4 | |
| 35 | +| <b>strength</b>([<i>num</i>]) | Sets or gets the force strength. Defines how strongly nodes are nudged to follow the quantized slopes. A value of `0` disables the force; `1` applies full strength. | 1 | |
| 36 | +| <b>considerAlpha</b>([<i>num</i>]) | Sets or gets whether the force intensity should decrease or not as alpha decays and the simulation cools down. | `false` | |
| 37 | + |
| 38 | + |
| 39 | +## ❤️ Support This Project |
| 40 | + |
| 41 | +If you find this module useful and would like to support its development, you can [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url). Your contributions help keep open-source sustainable! |
| 42 | +[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url) |
| 43 | + |
| 44 | +[npm-img]: https://img.shields.io/npm/v/d3-force-slope |
| 45 | +[npm-url]: https://npmjs.org/package/d3-force-slope |
| 46 | +[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-force-slope |
| 47 | +[build-size-url]: https://bundlephobia.com/result?p=d3-force-slope |
| 48 | +[npm-downloads-img]: https://img.shields.io/npm/dt/d3-force-slope |
| 49 | +[npm-downloads-url]: https://www.npmtrends.com/d3-force-slope |
0 commit comments