桑基图：一小时流量分析

桑基图用于资金流分析：从数据到交互

桑基图可可视化资源流向，展示资金从来源经过节点到接收者的移动过程。与关注占比的饼图不同，桑基图展示了完整链条：资金来自何处、经过哪些中间节点以及最终分布到哪里。

这使得识别隐藏模式成为可能。例如，单项小额支出看似微不足道，但总体来看它们占预算的 21%。图表分为四层：收入、总预算、支出类别、子类别。

关键洞察：

• 流向清晰可见：工资 → 公共池 → 食品/交通。
• 节点（如银行）显示资金集中度。
• 嵌套保留连接：转账至 T-Bank → 进一步明细。

与饼图对比

当类别超过 5-7 个时，饼图可读性下降：难以比较片段，没有移动方向或嵌套。桑基图通过显示具有比例线宽的流程序列解决了这个问题。

| 方面 | 饼图 | 桑基图 |

|--------|-----------|--------|

| 可读性 | 超过 5 个类别下降 | 可缩放 |

| 方向 | 无 | 明确：从左到右 |

| 嵌套 | 无 | 支持 |

| 流向 | 仅占比 | 完整轨迹 |

桑基图适用于具有清晰阶段序列的任务。

创建交互式桑基图的步骤

技术栈：React + D3.js 配合自定义桑基布局。该过程通过 AI (Claude) 加速，根据描述生成代码。

• 数据准备： 通过 AI 将 PDF 对账单转为 CSV。清洗、分组、标准化类别。小于 1000 卢布的金额归入“杂项”，详情在工具提示中显示。
• 结构： 收入（按来源：工资、转账）→ 总预算 → 支出 → 子类别。
• 第一次迭代： 基本渲染带工具提示。
• 优化：

- 子类别居中。

- 限制流宽度。

- 缩放以提高标签可读性。

- 移动端适配：使用底部弹窗代替工具提示。

AI 任务描述示例：

"基于 D3.js 的桑基图带工具提示。收入 → 预算 → 支出。将小于 1000 卢布归入‘杂项’。"

交互功能与优化

工具提示：悬停显示简要信息，长按显示操作列表，点击固定位置。定位考虑屏幕边界。

AI 问题与修复：

• 工具提示偏移：添加规则。
• 支付分类：手动修正模糊项（例如 MAPP_SBERBANK → “其他转账”）。
• 储蓄不被视为支出。

移动端版本：

• 按钮 + 手势缩放。
• 列表模式查看详情。
• 工具提示使用底部弹窗。

标签不与数字分开换行（₽ 附后）。

个人财务之外的应用

• 账户/单元之间的资金流动。
• 含中间节点的成本分析。
• 业务中的客户流、请求、阶段。

局限性：

• 不适用于精确分析（轴上无数字）。
• 无流向或嵌套超过 3 层时效果不佳。
• 数据量大时显得杂乱。

关键点

• 开发速度： Illustrator 静态图 — 2 天；D3 交互式 — 1 小时 + 优化。
• 入门门槛： 需要理解数据并为 AI 描述任务的能力。
• 可读性妥协： 缩放和隐藏重叠标签；详情在工具提示中。
• AI 作为工具： 生成代码，但迭代和领域逻辑由开发者负责。
• 方法转变： 实验成本降低，专注于交互性。

— Editorial Team