Graph
Force-directed node/edge graph with draggable nodes, pan/zoom, hover-highlighting, and keyboard navigation.
Installation
npx dafink-ui add graphRequires: d3-force, @types/d3-force
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| nodes | GraphNode[] | - | Required. Array of { id, label, group? } objects. |
| edges | GraphEdge[] | - | Required. Array of { source, target } objects referencing node ids. |
| width | number | 600 | SVG width in pixels. |
| height | number | 400 | SVG height in pixels. |
| className | string | "" | Additional classes on the root wrapper div. |
| onNodeSelect | (node: GraphNode) => void | - | Called when a node is selected via click or keyboard Enter/Space. |