d3.forceStraighten

This force transforms flexible sequences of nodes into straighter configurations by identifying arms—linear chains of nodes where each internal node connects to exactly two others—and nudging them toward alignment.

Under the hood, it uses linear regression to find the best-fit line through each arm, then applies a spring-like force that pulls each node toward that line. The farther a node is from alignment, the stronger the corrective force, encouraging long arms to behave like stiff rods instead of floppy chains.

This force plugin is designed to be used with the d3-force simulation engine. It is also compatible with d3-force-3d and can function in a one, two (default) or three-dimensional space.

Quick start

import d3ForceStraighten from 'd3-force-straighten';

or using a script tag

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

then

d3.forceSimulation()
  .nodes(<myNodes>)
  .force('straighten-arms', d3.forceStraighten(<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 | | strength([num]) | Sets or gets the force strength. Defines how strongly nodes are pulled toward their best-fit straight line. 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!