Sankey diagram
Weighted flow diagram with nodes and links — node height equals flow.
Basic usage
Data is passed via props and rendered as pure SVG, with no third-party charting dependency.
Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.
<CfSankeyDiagram ... /><CfSankeyDiagram ... />Three-layer purchase path
Search engine / direct visit → product list / detail → add-to-cart / checkout, in three layers.
<CfSankeyDiagram :nodes="n" :links="l" /><CfSankeyDiagram nodes={n} links={l} />API
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | SankeyNode[] | — | { id, name, layer?, colorIndex? }[] |
links | SankeyLink[] | — | { source, target, value }[] |
nodeWidth | number | 12 | Node bar width |
反馈与讨论
Sankey diagram · Discussion