第三部分 · 术 / Chapter 11

层次数据可视化

层次(Hierarchy)是一种极其常见的数据组织方式——从文件系统到生物分类,从域名系统到组织架构。本章探索如何用节点-链接树、矩形树图、旭日图、圆堆图等方法来展示层次结构中的关系与大小,并探讨多层次数据的比较方法。

树可视化 矩形树图 旭日图 圆堆图 冰柱图 层次比较
11.1

层次数据可视化概述

层次数据(Hierarchical Data)在现实世界中无处不在。从计算机的文件系统(目录包含子目录和文件),到生物学的分类体系(界门纲目科属种),再到互联网的域名系统(如 www.fudan.edu.cn),层次关系是人类组织和理解复杂信息的基本模式之一。

层次数据的可视化目标包括:展示层次结构的全貌、揭示节点之间的父子关系、比较不同子树的规模与深度、支持用户在层次中进行导航和探索。

📂
文件系统
根目录 → 文件夹 → 子文件夹 → 文件,典型的树形层次结构,每个节点只有一个父节点。
🌿
生物分类
界 → 门 → 纲 → 目 → 科 → 属 → 种,七级分类体系形成严格的层次结构。
🧠

小测验:11.1 层次数据概述

+20 XP
Q1. 以下哪个不是层次数据的典型应用?
Q2. 层次数据可视化的核心目标是?
11.2

层次数据特点

层次数据的基本结构是树(Tree):一个连通的无环图。树中有一个特殊节点称为根(root),其他每个节点有且仅有一个父节点。

有根树(Rooted Tree)指定了根节点,每条边都有方向(从父到子)。无根树(Unrooted Tree)没有指定根节点,更常用于生物进化树中,强调节点之间的距离关系而非层级。

层次结构的关键属性包括:深度(从根到节点的路径长度)、(一个节点的子节点数量)、叶节点(没有子节点的节点)和子树(以某节点为根的子结构)。

💡
树 vs 层次结构:严格来说,层次结构(Hierarchy)比树更广泛,可以包含DAG(有向无环图),即一个节点可以有多个父节点。但在大多数可视化场景中,我们讨论的是严格的树形结构。
🌳

小测验:11.2 层次数据特点

+20 XP
Q1. 有根树与无根树的本质区别是什么?
Q2. 一棵有 100 个节点的树有多少条边?
11.3

单层次数据的可视化形式

层次数据的可视化方法可以分为四大类:节点-链接型(用点和线表示父子关系)、嵌套型(用空间包含关系表示层级)、邻接型(用相邻区域表示层级)、缩进型(用缩进表示层级深度)。

11.3.2 嵌套型树可视化

矩形树图(Treemap)由 Ben Shneiderman 于 1991 年提出,是嵌套型可视化的代表。它用矩形的面积表示节点的大小(如文件大小),用嵌套关系表示层级结构。Treemap 的优势在于能 100% 利用显示空间,特别适合展示大量叶节点的大小差异。

圆堆图(Circle Packing)用嵌套的圆形表示层级关系,父节点的圆包含所有子节点的圆。虽然空间利用率不如矩形树图,但层级结构更加清晰。

📦 交互演示:矩形树图(Treemap) 互动 · 点击下钻

点击矩形块可以下钻查看子层级,点击面包屑导航可以返回上层。

交互演示:圆堆图(Circle Packing) 互动 · 点击缩放

点击圆形区域可以缩放查看子层级,点击背景返回上层。

📦

小测验:11.3.2 嵌套型树

+20 XP
Q1. 矩形树图(Treemap)的矩形面积编码的是什么?
Q2. 圆堆图相比矩形树图的主要优势是什么?
11.3.3 邻接型树可视化

冰柱图(Icicle Plot)使用矩形条带表示节点,每层的节点并排排列,宽度表示大小。它类似矩形树图的"展开"版本。

旭日图(Sunburst)是冰柱图的极坐标版本:根在中心,每层用环带表示,角度表示大小。旭日图的美观性好,层级清晰,适合展示多层级的比例关系。

☀️ 交互演示:旭日图(Sunburst) 互动 · 悬停高亮

鼠标悬停查看节点信息和面包屑路径,点击可以切换根节点进行下钻。

💡
冰柱图 vs 旭日图:冰柱图(直角坐标)适合精确比较宽度;旭日图(极坐标)更美观,但角度比较不如长度直观。两者本质上编码的信息完全相同。
☀️

小测验:11.3.3 邻接型树

+20 XP
Q1. 旭日图中,一个扇区的角度大小代表什么?
Q2. 旭日图和冰柱图的关系是什么?
11.3.4 缩进型树可视化

缩进列表(Indented List)是最常见的层次可视化方式——如文件资源管理器中的目录树。每个层级向右缩进固定距离,深度由缩进量直接体现,用户可以展开/折叠子树。

缩进型可视化的优点:简洁熟悉、层级明确、适合精确浏览。缺点:空间利用率低,难以一眼看出整体结构和比例。

📋

小测验:11.3.4 缩进型树

+20 XP
Q1. 缩进列表最大的优势是什么?
Q2. 以下哪种可视化方式的空间利用率最高?
11.4

层次数据比较

当需要比较两棵或多棵层次结构时,问题变得更加复杂。双层次数据比较涉及两棵树的差异检测:哪些节点被增加/删除/移动/修改。多层次数据比较则需要在多棵树之间找出共性和差异。

常用方法包括:并置比较(两棵树并排显示)、叠加比较(在同一视图上用颜色标注差异)、动画过渡(在两个状态之间平滑切换)。

可视化类型代表方法空间利用优点缺点
节点-链接型 经典树图、径向树、双曲树 结构最直观 节点多时拥挤
嵌套型 矩形树图、圆堆图 展示大小差异 深层结构不清
邻接型 冰柱图、旭日图 层级清晰、美观 角度比较不精确
缩进型 缩进列表 用户最熟悉 无法显示全局
🔄

小测验:11.4 层次数据比较

+20 XP
Q1. 比较两棵层次树的差异时,以下哪种方法最直观?
Q2. 如果需要展示一个包含 10000 个文件的目录树中各文件的大小分布,最佳可视化是?
🎮

互动闯关:层次可视化挑战

通过趣味游戏巩固所学知识,在挑战中加深理解!完成每个游戏可获得额外 XP 奖励。

🔍图表识别挑战 +30 XP

观察下方的层次数据可视化图形,快速识别它的类型。共 5 轮!

轮次: 1/5 得分: 0
🧩场景配对挑战 +30 XP

将下方的应用场景与最适合的可视化方法配对。点击场景卡片,再点击方法卡片完成配对。

已配对: 0/6 得分: 0
📋 应用场景(点击选择)
📊 可视化方法(点击配对)
🌲树构建大师 +30 XP

根据描述,选择正确的树结构属性。共 5 题,测试你对层次数据结构的理解!

题目: 1/5 得分: 0
📚 返回教材首页