Skip to main content

linkForce

Acts like a spring along every link: connected nodes are pulled together (or pushed apart) until they sit roughly length pixels from each other.

<Graph
graph={data}
linkForce={{ length: 130, strength: 1 }}
/>
FieldTypeDescription
lengthnumberTarget distance between linked nodes, in pixels.
strengthnumberHow rigidly the distance is enforced. 1 is stiff, values near 0 are loose and stretchy.

Drag the sliders and watch the springs react:

linkForce={{ length, strength }}Live

Choosing values

  • length — match it to your node size: large card-style nodes need 150+ to avoid overlap; small dots are fine at 30–80.
  • strength1 keeps distances uniform and grid-like; 0.1–0.5 lets the layout breathe and is usually more organic. Combine a loose link force with a stronger chargeForce for classic network layouts.
Omitted = no spring

Like all forces, linkForce is only added when you pass the prop. Without it, links are still drawn, but they exert no pull on the layout.