什么是树状图？

树状布局

“树状布局”本身并不是一种独立的图表类型，而是 D3 中一系列层次化布局的统称。

它旨在生成一种“节点-连线”图，以直观的方式展示节点之间的父子关系，清晰地呈现一个节点与另一个节点之间的从属结构。

例如，下图展示了一个根节点（起始点），标记为“顶层节点”，它有两个子节点（Bob：顶层节点的子节点 和 Sally：顶层节点的子节点）。随后，“Bob：顶层节点的子节点”又有两个子节点（即依赖节点）：“Bob的儿子”和“Bob的女儿”。

这种图表形式的最大优势在于：用文字描述其结构较为困难，但通过图形化呈现后，节点之间的关系变得一目了然。

数据结构

生成此类布局所需的数据需要能够表达节点之间的关系，但这并不一定复杂。以下是以 JSON 格式表示的上述图表数据，展示了构建正确层级结构所需的最小信息量：

1{
2  "name": "Top Node",
3  "children": [
4    {
5      "name": "Bob: Child of Top Node",
6      "children": [
7        {
8          "name": "Son of Bob"
9        },
10        {
11          "name": "Daughter of Bob"
12        }
13      ]
14    },
15    {
16      "name": "Sally: Child of Top Node"
17    }
18  ]
19}

该数据结构中，每个节点都包含一个 name 字段用于标识自身，并在有子节点时通过 children 数组列出其子节点。

上述数据是按层级组织的，但并非所有数据源都能提供如此规整的结构。在后续示例中，我们将探讨如何导入“扁平化”数据（如来自 CSV 文件的数据），并将其转换为层级结构。

本章中，我们将先从一段简单的代码开始，实现树状图的生成，然后逐步探索多种调整方式：包括将图表旋转为垂直方向、为节点添加动态样式、从扁平文件或外部数据源导入数据。最后，我们将介绍一个更复杂的实际应用场景——支持用户交互式展开和折叠节点的树形结构，这在网页应用中非常常见。