📊 算法可视化平台 | Algorithm Visualizer

数据结构与算法 — 交互式学习工具
数算B课程大作业 | 2026 春季学期

---

🎯 项目背景

在学习数据结构与算法的过程中，许多经典算法（如快速排序的分区过程、Dijkstra 的松弛操作、AVL 树的旋转）仅通过静态图示或文字描述难以直观理解其执行流程。

本项目旨在构建一个交互式算法可视化平台，通过动画动态展示算法的每一步执行过程，辅以伪代码同步高亮，帮助学习者深入理解算法的核心思想和执行细节。

✨ 核心功能

• 📊 排序算法可视化 — 快速排序、归并排序、堆排序

  • 柱状图实时展示元素比较、交换、分区
  • 支持自定义输入数组或随机生成

• 🕸️ 图算法可视化 — BFS、DFS、Dijkstra、A* 寻路

  • 交互式图编辑器：点击添加节点、连线、设置权重
  • 距离表实时更新、优先队列状态展示
  • 支持 Dijkstra 与 A* 对比

• 🌳 树结构可视化 — BST 二叉搜索树、AVL 平衡树

  • 节点插入过程逐步展示
  • AVL 四种旋转动画（LL/RR/LR/RL）
  • 平衡因子实时显示

• 🎮 通用播放控制

  • 播放/暂停/步进/后退/调速
  • 进度条拖拽跳转
  • 伪代码同步高亮

🧠 核心算法与知识点

模块	算法	核心知识点
排序	快速排序	分治策略、双指针分区、递归
排序	归并排序	分治策略、两路归并、辅助数组
排序	堆排序	二叉堆（数组实现）、堆化（上滤/下滤）、原地排序
图	BFS	队列（FIFO）、无权图最短路径、层序遍历
图	DFS	栈/递归、回溯、连通分量
图	Dijkstra	优先队列（最小堆）、贪心策略、松弛操作
图	A*	启发式搜索、估价函数 f=g+h、与 Dijkstra 对比
树	BST	二叉搜索树性质、插入/查找、中序遍历有序性
树	AVL	平衡因子、四种旋转（LL/RR/LR/RL）、自平衡机制

自实现数据结构： 最小堆优先队列（MinHeap）完全自主实现，包含上滤、下滤、decreaseKey 操作，用于 Dijkstra 和 A* 算法。

🏗️ 架构设计

┌─────────────────────────────────────────────────┐
│                   UI Layer (View)                │
│  ┌──────────┐  ┌──────────────┐  ┌───────────┐  │
│  │ 控制面板  │  │  p5.js 画布  │  │ 伪代码面板 │  │
│  └──────────┘  └──────────────┘  └───────────┘  │
├─────────────────────────────────────────────────┤
│               Controller Layer                   │
│  ┌──────────────────────────────────────────┐   │
│  │  AnimationEngine: 快照队列 + 播放控制     │   │
│  └──────────────────────────────────────────┘   │
├─────────────────────────────────────────────────┤
│                Model Layer                       │
│  ┌──────────┐ ┌──────────┐ ┌────────────────┐  │
│  │ 排序算法  │ │ 图算法   │ │ 树算法         │  │
│  └──────────┘ └──────────┘ └────────────────┘  │
└─────────────────────────────────────────────────┘

核心设计思想： 算法本身不操作 DOM/Canvas，只产出「操作快照序列」。AnimationEngine 统一消费快照，驱动画面渲染。算法核心逻辑与可视化完全解耦。

🚀 运行指南

环境要求

• Node.js >= 18
• npm >= 9

安装与启动

# 1. 进入项目目录
cd AlgorithmVisualizer

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 4. 浏览器访问
# 默认打开 http://localhost:3000

生产构建

npm run build    # 构建到 dist/
npm run preview  # 预览构建产物

📁 项目结构

AlgorithmVisualizer/
├── src/
│   ├── algorithms/
│   │   ├── sorting/          # 排序算法（快排/归并/堆排）
│   │   │   ├── quickSort.js
│   │   │   ├── mergeSort.js
│   │   │   └── heapSort.js
│   │   ├── graph/            # 图算法（BFS/DFS/Dijkstra/A*）
│   │   │   ├── MinHeap.js    # 自实现最小堆
│   │   │   ├── bfs.js
│   │   │   ├── dfs.js
│   │   │   ├── dijkstra.js
│   │   │   └── astar.js
│   │   └── tree/             # 树算法（BST/AVL）
│   │       ├── bst.js
│   │       └── avl.js
│   ├── engine/
│   │   └── AnimationEngine.js  # 核心播放引擎
│   ├── renderers/
│   │   ├── SortRenderer.js     # 排序可视化渲染
│   │   ├── GraphRenderer.js    # 图算法可视化渲染
│   │   └── TreeRenderer.js     # 树结构可视化渲染
│   ├── ui/
│   │   ├── ControlPanel.js     # 控制面板组件
│   │   └── PseudocodePanel.js  # 伪代码面板组件
│   ├── utils/
│   │   └── presets.js          # 预设数据
│   └── main.js                 # 主入口
├── docs/
│   └── screenshots/            # 截图素材
├── index.html
├── style.css
├── package.json
├── vite.config.js
├── LICENSE
└── README.md

🖼️ 功能截图

（请运行项目后截取以下场景的截图添加到 docs/screenshots/ 目录）

1. 快速排序分区的枢轴选择和交换过程
2. Dijkstra 算法距离表更新和最短路径树
3. A* 寻路在网格图上的启发式搜索
4. AVL 树的旋转动画

🤖 AI 工具声明

本项目在开发过程中使用了 AI 工具（Claude）辅助以下部分：

• UI 框架代码生成： 控制面板 HTML 结构、CSS 样式布局
• 样板代码编写： 项目脚手架搭建、模块导入导出
• 文档润色： README 结构优化

核心算法逻辑（排序、图搜索、树旋转、最小堆优先队列）由本人审查、理解和验证，确保对每一行代码的逻辑都可解释。

📄 开源协议

本项目采用 MIT License 开源。

---

Made with ❤️ for 数据结构与算法课程