第二部分 · 术 / Chapter 10

图数据可视化

图(Graph)是描述实体之间关系的基本数据结构,广泛应用于社交网络、知识图谱、生物网络和交通系统等领域。本章探索如何利用力导向布局、邻接矩阵、社区检测和边捆绑等技术,将复杂的图结构直观地展现在二维平面上,帮助用户发现隐藏的模式与关系。

力导向 邻接矩阵 社区检测 边捆绑 中心性 图布局
10.1

图数据特征与表示

图数据由节点(Nodes)边(Edges/Links)组成,是一种描述实体间关系的通用数据结构。与表格数据不同,图数据的核心在于拓扑结构——节点之间如何连接、形成什么样的模式。

理解图数据的特征是进行有效可视化的前提。我们需要关注节点层面、边层面和全局层面的特征。

10.1.1 基本图数据特征

节点度数(Degree)是最基本的图特征,指与该节点直接相连的边数。在有向图中,分为入度和出度。度数高的节点通常是网络中的"枢纽"。

节点中心性(Centrality)衡量节点在网络中的重要程度,有多种定义:

🔗
度中心性(Degree Centrality)
直接用度数衡量重要性,度越高越重要。简单直观,但只考虑直接邻居。
🛤️
介数中心性(Betweenness)
经过该节点的最短路径数量。高介数的节点是网络的"桥梁",控制信息传播。
📏
接近中心性(Closeness)
该节点到所有其他节点的平均最短路径的倒数。值越大表示该节点越"居中"。
🌟
特征向量中心性(Eigenvector)
不仅考虑邻居数量,还考虑邻居的重要性。与重要节点相连的节点也被认为是重要的。

聚类系数(Clustering Coefficient)衡量节点的邻居之间互相连接的程度,反映局部网络的紧密程度。值域为 [0, 1],值越高表示局部越紧密。

🧠

小测验:10.1.1 基本图数据特征

+20 XP
Q1. 在社交网络中,哪种中心性最适合找到连接不同社区的"桥梁"节点?
Q2. 聚类系数为 1 意味着什么?
10.1.2 图拓扑特征

连通性(Connectivity):图是否存在从任一节点到达另一节点的路径。无向图中称为连通分量(Connected Components),有向图中分为强连通和弱连通。

社区结构(Community Structure):许多真实网络中,节点会自然形成紧密连接的群组(社区),社区内部连接紧密,社区之间连接稀疏。社区检测是图分析的核心任务之一。

小世界网络(Small-World Network):具有高聚类系数和短平均路径长度的网络。"六度分隔"就是小世界现象的体现。

无标度网络(Scale-Free Network):节点度数分布服从幂律分布,即少数节点拥有大量连接(hub节点),大多数节点连接很少。社交网络和互联网都属于无标度网络。

🤔
思考:为什么社交网络通常既是小世界网络又是无标度网络?这两个特征之间有什么关系?
🧠

小测验:10.1.2 图拓扑特征

+20 XP
Q1. 无标度网络的节点度数分布服从什么规律?
Q2. 小世界网络的两个关键特征是什么?
10.1.3 图数据存储与表示

邻接矩阵(Adjacency Matrix):用 N x N 矩阵表示 N 个节点的图,矩阵元素 A[i][j] 表示节点 i 和 j 之间是否有边。适合稠密图,支持快速查询,但空间复杂度为 O(N^2)。

邻接表(Adjacency List):对每个节点维护一个邻居列表。适合稀疏图,空间效率高 O(N+E),遍历邻居快,但查询特定边是否存在较慢。

表示方法空间复杂度查询边遍历邻居适用场景
邻接矩阵 O(N^2) O(1) O(N) 稠密图、矩阵运算
邻接表 O(N+E) O(degree) O(degree) 稀疏图、图遍历
🧠

小测验:10.1.3 图数据存储与表示

+20 XP
Q1. 一个有 1000 个节点但只有 2000 条边的社交网络,更适合用哪种方式存储?
Q2. 邻接矩阵中,无向图的矩阵有什么特点?
10.2

图布局算法

图布局的核心任务是:为图中的每个节点确定二维平面上的位置坐标,使得图的结构信息(如社区、层次、中心节点等)能够直观地呈现。好的布局应当减少边交叉、均匀分布节点、突出重要结构。

10.2.1 力导向布局

力导向布局(Force-Directed Layout)是最经典、最常用的图布局算法。其核心思想源自物理学的弹簧模型

🧲
斥力(Repulsion)
所有节点之间存在库仑斥力,防止节点重叠。距离越近斥力越大。
🔗
引力(Attraction)
相连节点之间通过弹簧连接,存在弹性引力。距离越远引力越大。

系统从随机初始位置开始,通过迭代模拟物理系统达到力平衡状态,最终得到美观的布局。D3.js 的 d3.forceSimulation 就是力导向布局的典型实现。

🧲 交互演示:力导向布局 (Force-Directed Layout) 互动 · 可拖拽

拖动节点观察力系统的动态响应,调整参数感受引力/斥力的效果。

💡
使用要点:力导向布局适用于中小规模图(数百到数千节点),对于大规模图需要采用多层次策略或近似算法。节点可拖拽是其重要交互特性。
🧲

小测验:10.2 图布局算法

+20 XP
Q1. 在力导向布局中,增大节点间的斥力会产生什么效果?
Q2. 力导向布局的"弹簧模型"中,弹簧连接的是?
10.2.2 降维布局

另一种图布局思路是将图视为高维数据,利用降维方法(如 MDS)来确定节点位置。具体做法是:计算所有节点对之间的最短路径距离矩阵,然后用多维标度(MDS)将其嵌入二维空间,使得低维空间中的距离尽可能保持高维距离关系。

这种方法的优势是全局结构保持较好,但计算复杂度较高(O(N^2)),不适合大规模图。

10.2.3 邻接矩阵布局

邻接矩阵可视化将图的邻接矩阵直接展示为热力图,行和列分别代表节点,交叉点的颜色表示是否有边或边的权重。通过对行列进行重排序(Reordering),可以揭示社区结构和聚类模式。

与节点-链接图相比,邻接矩阵在展示稠密图时更有优势,因为不会出现边交叉的问题。但它不利于展示路径和全局连通性。

📊 交互演示:节点-链接图 vs 邻接矩阵 互动 · 切换视图

切换同一图数据的两种可视化表示,对比节点-链接图和邻接矩阵的优劣。

📊

小测验:10.2.3 邻接矩阵布局

+20 XP
Q1. 邻接矩阵可视化相比节点-链接图的最大优势是?
Q2. 对邻接矩阵进行行列重排序的目的是?
10.3

特别图布局算法

通用的图布局算法之外,针对特定类型的图数据,研究者设计了专用的布局算法,以更好地展示图的特定结构。

10.3.1 层次布局

树布局(Tree Layout):对于树形结构数据,将根节点放在顶部,子节点逐层向下排列。常见的有 Reingold-Tilford 算法,能产生紧凑美观的树形布局。

Sugiyama 算法:处理有向无环图(DAG)的层次布局,通过四个阶段完成:分层 -> 减少交叉 -> 分配坐标 -> 设置边路径。广泛用于流程图、调用图等可视化。

10.3.2 正交走线布局

正交走线布局(Orthogonal Layout)将所有边限制为水平或垂直线段的组合。常用于电路图、UML图等需要规整外观的场景。其核心挑战是最小化弯折次数和面积占用。

10.3.3 边捆绑算法

边捆绑(Edge Bundling)将走向相似的边聚集在一起形成"束",减少视觉杂乱。核心思想是:如果多条边的起点和终点在空间上相近,将它们的中间部分合并成共同路径。常用算法包括:分层边捆绑(HEB)、力导向边捆绑(FDEB)等。

🏘️ 交互演示:社区检测 (Community Detection) 互动

调整参数观察社区结构如何影响图的外观,节点颜色表示所属社区。

🧬 交互演示:边捆绑 (Edge Bundling) 互动 · 对比

切换观察同一图在有无边捆绑时的视觉效果差异。

10.3.4 深度学习驱动布局

近年来,研究者开始探索使用图神经网络(GNN)和深度学习来学习图布局。核心思路是:将人类认为"好"的布局作为训练数据,让模型学习从图结构到节点坐标的映射。这种方法的优势是速度快(推理时一次前向传播即可),但泛化能力和可解释性仍是挑战。

🧬

小测验:10.3 特别图布局算法

+20 XP
Q1. 边捆绑算法的主要目的是?
Q2. Sugiyama 算法主要处理什么类型的图?
🎮

互动闯关:图数据可视化挑战

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

🔗度数侦探 +30 XP

观察图中高亮的节点,判断它的度数。共 5 轮,每轮 15 秒!

轮次: 1/5 得分: 0 15s
🧩图表配对挑战 +30 XP

将下方的应用场景与最适合的图可视化方法配对。

已配对: 0/6 得分: 0
应用场景(点击选择)
可视化方法(点击配对)
🛤️最短路径挑战 +30 XP

在图中找到从绿色节点到红色节点的最短路径长度(经过的边数)。共 5 轮!

轮次: 1/5 得分: 0
📚 返回教材首页