如何用 d3-hierarchy 轻松实现 5 种层级数据可视化布局？完整指南 🌟

d3-hierarchy 是 D3.js 生态中专注于层级数据可视化的核心模块，提供了树形图、打包图、矩形树图等多种布局算法。无论是企业组织架构、文件系统还是生物进化树，它都能帮你将复杂层级数据转化为直观的视觉图表。

📊 5 种核心布局算法，满足不同场景需求

1. 树形布局（Tree Layout）：清晰展示父子关系

树形布局是最经典的层级可视化方式，通过分支结构直观呈现节点间的从属关系。适用于组织架构图、家谱树等场景。核心实现位于 src/tree.js，支持自定义节点间距、方向（水平/垂直）和排序方式。

图：树形布局展示层级数据的分支结构，节点间关系一目了然

2. 矩形树图（Treemap Layout）：面积大小体现数据权重

矩形树图将层级数据映射为嵌套矩形，子节点面积大小对应其数值权重。适合展示磁盘空间占用、销售数据占比等场景。该布局提供多种分割算法，如切片- dice（src/treemap/sliceDice.js）、平方分割（src/treemap/squarify.js）等。

图：矩形树图通过面积大小直观对比不同层级节点的权重关系

3. 打包布局（Pack Layout）：嵌套圆圈展示层级结构

打包布局用圆形嵌套表示层级关系，父节点圆圈包含所有子节点圆圈，面积大小同样反映数据权重。适合展示分类数据的包含关系，如物种分类、文件类型占比。核心算法实现见 src/pack/index.js。

图：打包布局以同心圆方式呈现嵌套数据，层次清晰且视觉友好

4. 聚类布局（Cluster Layout）：紧凑展示分支结构

聚类布局（又称系统发育树）将同类节点聚集排列，强调层级分支的聚类关系。常用于生物学进化树、语言学谱系图等场景。实现代码位于 src/cluster.js，支持自定义聚类间距和排序规则。

图：聚类布局将相似节点紧凑排列，突出展示分支聚类特征

5. 分区布局（Partition Layout）：扇形区域展示层级占比

分区布局将数据映射为扇形或环形区域，每个层级对应不同环层，角度或面积表示节点权重。适合展示预算分配、市场份额等比例型数据。核心实现见 src/partition.js。

图：分区布局以扇形区域直观展示各层级节点的占比关系

🚀 快速上手：3 步实现层级数据可视化

1. 安装 d3-hierarchy

通过 npm 或 yarn 快速安装：

npm install d3-hierarchy
# 或
yarn add d3-hierarchy

也可直接引入 CDN 资源（具体版本可参考 package.json 中的最新版本号）。

2. 准备层级数据

支持 JSON 树形结构或 CSV 扁平数据（需配合 src/stratify.js 转换）。示例 JSON 格式：

{
  "name": "Root",
  "children": [
    {"name": "Child A", "value": 10},
    {"name": "Child B", "value": 20}
  ]
}

3. 应用布局算法并渲染

以树形布局为例，核心代码片段：

import {hierarchy, tree} from 'd3-hierarchy';

// 解析数据为层级结构
const root = hierarchy(data);

// 应用树形布局（设置宽高）
const treeLayout = tree().size([width, height]);
treeLayout(root);

// 渲染节点和连线（配合 D3.js SVG API）
root.descendants().forEach(node => {
  // 绘制节点和连线的代码
});

✨ 为什么选择 d3-hierarchy？

🔹 极致灵活的自定义能力

支持调整节点大小、间距、排序方式、布局方向等几乎所有视觉参数。通过 src/hierarchy/index.js 提供的基础层级操作，可实现完全定制化的布局效果。

🔹 高性能处理大规模数据

内置高效算法（如 src/pack/enclose.js 的圆形包围盒计算），在十万级节点数据下仍保持流畅交互。测试案例见 test/pack/bench-enclose.js 的性能基准测试。

🔹 无缝集成 D3.js 生态

可与 d3-selection、d3-transition 等模块完美配合，实现动态交互效果（如节点展开/折叠动画、悬停提示等）。

📚 学习资源与社区支持

• API 文档：完整的方法说明和参数配置见项目 README.md
• 测试案例：丰富的使用示例可参考 test/ 目录下的各类测试文件
• 官方示例：D3.js 官网提供的交互式示例（需结合 d3-hierarchy 使用）

无论是数据可视化新手还是资深开发者，d3-hierarchy 都能帮助你快速将复杂层级数据转化为富有洞察力的视觉图表。立即尝试，让你的数据讲述更生动的故事吧！ 🚀

注：项目源码可通过 git clone https://gitcode.com/gh_mirrors/d3/d3-hierarchy 获取，更多高级用法请探索 src/ 目录下的核心实现。