SankeyChart 桑基图

基础用法

nodes 是节点数组，links 用节点下标连接（source/target 是 nodes 的索引）。节点色优先级：node.color > defaultNodeColor > 分类色板按下标轮转。连线默认按来源色→目标色渐变，link-color="gray" 换成整齐的灰。任一节点带 value 时值标签自动开启（showNodeValues 可强制开关）。

流量分发

示例加载中...

行内标签与灰连线

示例加载中...

容错

环形连接会让 d3-sankey 抛错——组件捕获后渲染空态并在控制台给出 dev 警告，不会拖垮宿主页面。

API

SankeyChart Props

属性名	类型	默认值	说明
`nodes`	`SankeyNodeData[]`	—	`{ name, color?, value?, tooltipData?, isDrillable?, childCount? }`。
`links`	`SankeyLinkData[]`	—	`{ source, target, value, isDrillable? }`，下标引用节点。
`height`	`number`	`400`	像素高度。
`width`	`number`	容器实测	显式宽度（SSR/测试用）。
`nodeWidth`	`number`	`8`	节点条宽。
`nodePadding`	`number`	`10`	同列节点垂直间距。
`showNodeValues`	`boolean \| 'auto'`	`'auto'`	`'auto'` 在任一节点有 `value` 时开启。
`nodeLabelLayout`	`'stacked' \| 'inline'`	`'stacked'`	值在名称上方 / 同行。
`formatValue`	`(v: number) => string`	`toLocaleString`	值格式化。
`showTooltip`	`boolean`	`true`	悬停提示框。
`defaultNodeColor`	`string`	—	分类色板前的兜底色。
`left` / `right`	`number \| string`	`'5%'`	布局左右留白（px 或百分比）。
`linkColor`	`'gradient' \| 'gray'`	`'gradient'`	连线填充模式。
`linkOpacity`	`number`	`0.5`	渐变连线不透明度。