Force-directed graphs,
the React way.
d3-graph-react wraps the power of d3-force in a fully typed React component. Render nodes and links as plain JSX, drag, zoom, and animate — without writing a single line of D3.
Why d3-graph-react
Everything you need to ship interactive graphs
The expressiveness of D3, the developer experience of React.
Nodes are just React components
Render anything as a node — avatars, cards, badges, charts. If it's JSX, it can live inside your graph. Links too.
Drag, zoom & pan built in
Smooth d3-powered interactions out of the box. Pinch, scroll, grab — no event wiring, no extra dependencies.
Tunable physics
Shape the layout with simple props: link distance, charge repulsion, and gravity. No d3-force API to learn.
TypeScript-first
Fully generic over your node and link data. Autocomplete and type-safety follow your domain types everywhere.
Ambient motion
One prop keeps your graph gently floating forever — perfect for dashboards and landing pages that feel alive.
Escape hatch to raw D3
Need full control? onSimulationCreated hands you the underlying d3-force simulation to extend as you wish.
Show me the code
From data to graph in under a minute
Pass nodes and links, style them with your own components. That's the whole API.
import { Graph } from "d3-graph-react";
const team = {
nodes: [
{ id: 1, name: "Design" },
{ id: 2, name: "Frontend" },
{ id: 3, name: "Backend" },
{ id: 4, name: "Data" },
],
links: [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
],
};
export const TeamGraph = () => (
<Graph
graph={team}
chargeForce={{ strength: -200 }}
NodeComponent={({ node }) => (
<span className="pill">{node.name}</span>
)}
/>
);
Ready to map your data?
Install the package, paste the quick start, and watch your first force-directed graph come to life in minutes.