桑基图 sankey
能量、资金、流量的守恒流动:节点分列排布,流带宽度即流量,一眼看出「从哪来、到哪去、谁是大头」。能源结构分析、成本构成追踪、用户路径转化的首选。
何时使用
- 数据是「源 → 转换 → 汇」的多级流动,且流量守恒(流出之和 ≈ 流入之和);
- 关心每条路径的占比与去向,而不是单点数值(那用柱状图);
- 节点列数建议 2–4 列,流带数量建议 ≤ 30 条,再多读图成本陡增。
示例
专属数据字段 sankeyData({ nodes: [{ name }], links: [{ source, target, value }] })。节点 value 可省略,自动按链接汇总;流带颜色继承源节点色,同源同色不追色。
能源流动分析
省级能源结构的经典表达:三类一次能源 → 发电 / 供热两条转换路径 → 居民 / 工业两类终端。悬浮流带强调自身与同源同宿路径、淡化其余;悬浮节点高亮相连全部流带并汇总总流量。
用户旅程分流
从启动到付费的三步路径:每条流带的宽度就是「走这条路的人有多少」,流失发生在哪一段一图可见。
配置要点
- 流带颜色继承源节点槽位色;
nodes[].color/links[].color可显式定色; - 图例点选节点即隐去该节点与相连流带,剩余节点重新等比布局;
- 悬浮语义:流带 → 强调自身 + 同源同宿,其余淡出;节点 → 强调相连流带;
- 节点
value缺省时按max(入流, 出流)自动汇总,一般不用手算; sankey.nodeAlign定列对齐:justify(默认)末端节点贴右缘,left按拓扑深度自然排布。