GRAPH NEURAL NETWORKS · INTERACTIVE SVG LAB

图神经网络可视化实验室

用纯 SVG 与原生 JavaScript 交互式呈现图神经网络的核心机制：从底层的消息传递、图卷积与图注意力，到 GraphSAGE 采样、图池化、节点分类、链路预测与图对比学习。八个模块、单文件、零外部依赖。

8 Modules SVG + Vanilla JS Zero Dependencies Single File

01MESSAGE PASSING

消息传递机制

图神经网络的核心范式：节点沿边向邻居发送消息，聚合收到的消息，再更新自身表示。观察消息在图上的流动、聚合与节点状态的演化。

消息流动可视化

02GRAPH CONVOLUTION

图卷积网络层通过归一化邻接矩阵 Â、特征矩阵 X 与权重矩阵 W 的乘积 H=ÂXW 完成一跳邻居聚合。观察矩阵逐层相乘与每个节点的感受野扩展。

A·X·W 矩阵乘法

03GRAPH ATTENTION

图注意力网络为每条边学习一个注意力系数，再对邻居特征做加权求和。边的粗细与颜色强度反映注意力权重，softmax 归一化让权重在邻居间分配。

注意力权重可视化

04NEIGHBOR SAMPLING

GraphSAGE 对每个节点采样固定数量的邻居，再用聚合函数（mean / LSTM / pool）融合邻居特征，实现归纳式学习与大规模图的可扩展训练。

邻居采样与聚合

05GRAPH POOLING

图池化将节点级特征压缩为图级表示：全局平均 / 最大池化直接聚合，注意力池化加权求和，层级池化（DiffPool）将节点聚类成超级节点。

池化过程可视化

06NODE CLASSIFICATION

半监督节点分类：仅少量节点带标签，GNN 通过消息传递将标签信息沿图结构传播到未标注节点。观察准确率随训练轮次的提升。

标签传播训练

07LINK PREDICTION

链路预测推断图中缺失的连边：编码器生成节点嵌入，解码器（点积 / MLP）对节点对打分，阈值过滤输出高置信预测链接。

缺失边预测

08CONTRASTIVE LEARNING

图对比学习通过对图做增强（边丢弃 / 节点遮蔽）构造正样本对，在嵌入空间拉近正对、推远负对，以 InfoNCE 损失实现自监督预训练。

对比学习嵌入空间