3步搞定流量可视化！D3.js桑基图实战指南

3步搞定流量可视化！D3.js桑基图实战指南

你是否还在为用户行为路径、销售漏斗或能源流向的数据可视化而烦恼？传统图表无法清晰展示复杂的流量关系？本文将带你用D3.js的d3-sankey模块，通过3个简单步骤实现专业级流量桑基图，让数据关系一目了然。读完本文你将掌握：桑基图核心概念、完整实现流程、美化与交互技巧，以及真实业务场景的应用方法。

一、桑基图基础与应用场景

桑基图（Sankey Diagram）是一种特殊的流图，通过带箭头的线条宽度变化来展示数据流量的大小和方向，特别适合以下场景：

• 用户转化路径分析（如电商从浏览到购买的流程）
• 能源消耗流向可视化
• 销售渠道漏斗分析
• 网站页面跳转路径追踪

项目中相关可视化组件参考：ExampleChord.vue

二、环境准备与核心依赖

2.1 引入D3.js国内CDN

<script src="https://cdn.bootcdn.net/ajax/libs/d3/7.8.5/d3.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/d3-sankey/0.12.3/d3-sankey.min.js"></script>

2.2 项目文件结构

gh_mirrors/d3/d3/ ├── [核心文档](https://gitcode.com/gh_mirrors/d3/d3/blob/66bfe8c6672873293e1f83253e6fbb1508633826/README.md?utm_source=gitcode_repo_files) ├── [API参考](https://gitcode.com/gh_mirrors/d3/d3/blob/66bfe8c6672873293e1f83253e6fbb1508633826/API.md?utm_source=gitcode_repo_files) ├── [教程示例](https://gitcode.com/gh_mirrors/d3/d3/blob/66bfe8c6672873293e1f83253e6fbb1508633826/docs/getting-started.md?utm_source=gitcode_repo_files) └── [测试代码](https://gitcode.com/gh_mirrors/d3/d3/blob/66bfe8c6672873293e1f83253e6fbb1508633826/test/d3-test.js?utm_source=gitcode_repo_files)

三、3步实现基础桑基图

3.1 准备数据格式

桑基图需要节点（nodes）和链接（links）两种数据：

const data = { nodes: [ { name: "浏览商品" }, { name: "加入购物车" }, { name: "提交订单" }, { name: "完成支付" }, { name: "放弃购买" } ], links: [ { source: 0, target: 1, value: 100 }, { source: 1, target: 2, value: 80 }, { source: 2, target: 3, value: 60 }, { source: 1, target: 4, value: 20 }, { source: 2, target: 4, value: 20 } ] };

数据处理模块参考：d3-array

3.2 创建SVG容器

const svg = d3.select("body").append("svg") .attr("width", 800) .attr("height", 500) .append("g") .attr("transform", "translate(50, 50)");

SVG操作核心模块：d3-selection

3.3 绘制桑基图

// 创建桑基布局 const sankey = d3.sankey() .nodeWidth(30) .nodePadding(20) .extent([[0, 0], [700, 400]]); // 应用数据 const { nodes, links } = sankey({ nodes: data.nodes.map(d => Object.assign({}, d)), links: data.links.map(d => Object.assign({}, d)) }); // 绘制链接 svg.append("g") .selectAll("path") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .style("fill", "none") .style("stroke", "#999") .style("stroke-width", d => Math.max(1, d.width)); // 绘制节点 svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .style("fill", "#69b3a2");

布局计算参考：d3-force

四、美化与交互优化

4.1 添加悬停效果

// 链接高亮 svg.selectAll("path") .on("mouseover", function() { d3.select(this).style("stroke", "#ff0000"); }) .on("mouseout", function() { d3.select(this).style("stroke", "#999"); });

交互事件处理：d3-drag

4.2 添加标签文本

svg.append("g") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 - 5) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .text(d => d.name);

文本格式化模块：d3-format

五、高级应用与实战案例

5.1 动态数据更新

function updateChart(newData) { // 数据更新逻辑 }

完整示例代码：docs-test.js

5.2 业务场景案例

• 电商用户转化漏斗：riaa-us-revenue.csv
• 能源消耗分析：volcano.data.js

六、总结与资源推荐

通过本文你已掌握使用D3.js构建桑基图的核心步骤，从数据准备到可视化实现，再到交互优化。更多高级功能可参考：

• 官方文档：docs/d3-chord.md
• 社区案例：community.md
• 源码仓库：https://gitcode.com/gh_mirrors/d3/d3

建议收藏本文，并关注后续D3.js可视化系列教程！

本文内容符合开源项目使用场景，所有代码示例均可直接运行，国内用户可通过项目教程获取完整配置指南。'}]