d3.forceSlope

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.

This force plugin is designed to be used with the d3-force simulation engine.

Quick start

import d3ForceSlope from 'd3-force-slope';

or using a script tag

<script src="//cdn.jsdelivr.net/npm/d3-force-slope"></script>

then

d3.forceSimulation()
  .nodes(<myNodes>)
  .force('slope-quantize', d3.forceSlope(<myLinks>));

API reference

| Method | Description | Default | |-----------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------:| | links([array]) | 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>}. | [] | | id([fn]) | Sets or gets the node object unique id accessor function, used by links to reference nodes. | node.index | | numAngles([num]) | 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 | | strength([num]) | 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 | | considerAlpha([num]) | Sets or gets whether the force intensity should decrease or not as alpha decays and the simulation cools down. | false |

❤️ Support This Project

If you find this module useful and would like to support its development, you can buy me a ☕. Your contributions help keep open-source sustainable!