10分钟上手D3旭日图：用多层级可视化解析数据迷宫
项目地址: https://gitcode.com/gh_mirrors/d3/d3 你是否曾面对嵌套文件夹占用分析、地区销售层级数据、品类结构统计等多层级数据无从下手？传统表格无法直观展示层级占比，普通饼图又难以表达复杂嵌套关系。本文将带你用D3.js的d3-hierarchy模块，通过5步实现专业级旭日图（Sunburst），让多层级数据结构一目了然。
什么是旭日图？
旭日图（Sunburst Chart）是一种通过嵌套环形展示层级数据的可视化方法，内层代表高级别分类，外层表示低级别分类，面积大小对应数值占比。相比传统树状图，它能更直观地展现整体与局部的关系。
D3.js通过partition布局实现旭日图，核心原理是将矩形分区布局转换为极坐标：
// 从矩形坐标转换为极坐标
function arc(d) {
const x = [d.x0, d.x1];
const y = [d.y0, d.y1];
return `M${arcGenerator.startAngle(deg2rad(x[0]))
.endAngle(deg2rad(x[1]))
.innerRadius(y[0])
.outerRadius(y[1])()}`;
}
准备工作
引入D3.js
使用国内CDN加速引入D3.js，确保图表在国内网络环境下快速加载：
<script src="https://cdn.bootcdn.net/ajax/libs/d3/7.8.5/d3.min.js"></script>
基础HTML结构
创建包含SVG容器的基础页面结构：
<div style="width: 800px; height: 800px; margin: 0 auto;">
<svg id="sunburst" width="100%" height="100%"></svg>
</div>
五步实现旭日图
1. 准备层级数据
旭日图需要符合层次结构的数据，通常包含name（节点名称）、value（节点数值）和children（子节点数组）：
const data = {
name: "总销售额",
value: 1000,
children: [
{ name: "华东区", value: 450, children: [
{ name: "上海", value: 200 },
{ name: "浙江", value: 150 },
{ name: "江苏", value: 100 }
]},
// 其他区域数据...
]
};
更复杂的场景可通过d3.stratify()将CSV数据转换为层级结构。
2. 构建层级布局
使用d3.hierarchy()处理原始数据，创建层次结构对象：
// 构建层次结构
const root = d3.hierarchy(data)
.sum(d => d.value) // 累加子节点值
.sort((a, b) => b.value - a.value); // 按值排序
3. 配置Partition布局
配置分区布局参数，设置尺寸和内边距：
// 创建分区布局
const partition = d3.partition()
.size([360, 300]) // 角度范围(0-360°)和半径范围(0-300px)
.padding(2); // 环形间距
// 应用布局计算
partition(root);
4. 绘制旭日图
通过D3的路径生成器绘制环形分区：
const svg = d3.select("#sunburst");
const arcGenerator = d3.arc();
// 绘制环形
const arcs = svg.selectAll("path")
.data(root.descendants())
.enter()
.append("path")
.attr("d", d => arcGenerator({
startAngle: (d.x0 / 360) * 2 * Math.PI,
endAngle: (d.x1 / 360) * 2 * Math.PI,
innerRadius: d.y0,
outerRadius: d.y1
}))
.style("fill", (d, i) => d3.schemeCategory10[i % 10])
.style("stroke", "#fff");
5. 添加交互效果
添加鼠标悬停高亮和信息显示功能：
// 添加交互
arcs.on("mouseover", function(event, d) {
d3.select(this).style("opacity", 0.8);
// 显示节点信息
tooltip.style.display = "block";
tooltip.innerHTML = `<strong>${d.data.name}</strong>: ${d.value}`;
})
.on("mouseout", function() {
d3.select(this).style("opacity", 1);
tooltip.style.display = "none";
});
进阶技巧
数据优化
- 使用
root.sort()控制节点顺序，重要数据放在显眼位置 - 通过
root.sum()和root.count()灵活计算节点值 - 复杂数据可结合d3.csv()加载外部数据文件
视觉美化
- 使用d3-scale-chromatic提供的专业配色方案
- 添加平滑过渡动画：
arcs.transition()
.duration(750)
.attrTween("d", d => {
// 过渡动画实现
});
性能优化
对于超过1000个节点的大型数据集：
- 使用Web Worker处理数据计算
- 实现节点聚合显示，避免过度细节
- 通过
pointer-events: none优化事件处理
实际应用案例
文件夹占用分析
通过旭日图直观展示磁盘文件夹层级占用情况，快速定位大文件： 
销售数据层级可视化
将地区-品类-产品三级销售数据通过颜色和面积清晰展示，帮助发现销售热点。
总结
通过本文学习，你已掌握使用D3.js partition布局构建旭日图的核心流程：
- 准备符合hierarchy数据结构的多层级数据
- 使用
d3.partition()创建布局并计算坐标 - 通过
d3.arc()生成环形路径 - 添加交互提升用户体验
更多高级用法可参考官方文档：
现在，尝试用你的业务数据替换示例数据，创建专属的多层级数据可视化吧！如有疑问，可查阅项目README.md获取更多帮助。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
