ForceGraph
D3-powered force-directed graph for counterparty networks — entity relationships, exposure connections, banking relationships
import { ForceGraph } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodesreq | ForceNode[] | — | Graph nodes with id, label, group, size |
linksreq | ForceLink[] | — | Edges with source, target, value |
width | number | — | SVG width in px (default 640) |
height | number | — | SVG height in px (default 400) |
title | string | — | Accessible chart title |
nodesrequiredType
ForceNode[]Default —Graph nodes with id, label, group, size
linksrequiredType
ForceLink[]Default —Edges with source, target, value
widthType
numberDefault —SVG width in px (default 640)
heightType
numberDefault —SVG height in px (default 400)
titleType
stringDefault —Accessible chart title
MobileStacks / Scroll
Force graph requires min 320px for legible node labels. ViewBox-based sizing scales down gracefully.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?