algorithm_visualizer

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

algorithm_visualizer

★ 15 Open GitHub ↗

数据结构可视化

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 📊 数据结构演练场

> 交互式算法可视化与练习平台

一个纯前端的中文算法可视化应用，覆盖排序、搜索、树、平衡树、图与网络等五大类共 **30+ 常用算法**。以"步骤流"为核心设计理念，将算法逻辑与可视化渲染解耦，让每一步执行过程清晰可见。

**本地运行：**

```bash
npm install
npm run dev
```

---

## ✨ 功能特性

| 功能 | 说明 |
|---|---|
| **步骤级可视化** | 算法以步骤事件流输出，播放器精确控制每一步的渲染 |
| **伪代码同步高亮** | 执行流与左侧伪代码实时对齐，当前行高亮显示 |
| **中文步骤解释** | 每一步均附有中文文字说明，帮助理解"发生了什么" |
| **播放控制** | 播放 / 暂停 / 单步前进 / 单步后退 / 重置 |
| **自定义输入** | 支持手动输入逗号分隔的数字序列（最多 15 个） |
| **随机数据生成** | 一键生成不重复的随机数列 |
| **实时统计面板** | 显示比较次数、交换次数、当前范围等指标 |
| **多种视图组件** | 柱状图、树图、图网络、TCP 流程图等多种可视化形态 |

---

## 🗂️ 支持算法

### 排序（8 个）

| 算法 | 时间复杂度（平均） | 稳定 |
|---|---|---|
| 冒泡排序 | O(n²) | ✅ |
| 选择排序 | O(n²) | ❌ |
| 插入排序 | O(n²) | ✅ |
| 希尔排序 | O(n log² n) | ❌ |
| 快速排序 | O(n log n) | ❌ |
| 归并排序 | O(n log n) | ✅ |
| 堆排序 | O(n log n) | ❌ |
| 基数排序 | O(nk) | ✅ |

### 查找（2 个）

- 线性查找
- 二分查找

### 树结构（8 个）

- BST 插入 / BST 查找
- 前序遍历 / 中序遍历 / 后序遍历
- 深度优先搜索（DFS）
- 广度优先搜索（BFS）
- 层序遍历

### 平衡树（6 个）

- AVL 树：插入 / 查找 / 删除（含旋转动画）
- 红黑树：插入 / 查找 / 删除（含重新着色与旋转）

### 图与网络（8 个）

- 最短路径：Dijkstra / Bellman-Ford / SPFA / Floyd-Warshall
- 最小生成树：Prim / Kruskal
- 网络协议：TCP 三次握手 / TCP 四次挥手

---

## 🏗️ 架构设计

```
算法步骤生成器（src/algorithms/steps/*）
        │
        ▼  Step[]  预计算步骤数组
   ┌─────────────┐
   │ PlayerEngine │  定时器驱动播放控制
   └─────────────┘
        │
        ▼  onStepChange 回调
   ┌─────────────┐
   │  usePlayer   │  统一状态管理层（60+ 分支处理）
   └─────────────┘
        │
        ▼  React 状态
   ┌──────────────────────────────────────────┐
   │           可视化组件层                     │
   │  ArrayBars │ TreeVisualizer │ GraphView  │
   └──────────────────────────────────────────┘
```

**核心原则**：算法模块只负责"发生了什么"，播放器决定"何时推进"，可视化层决定"如何呈现"——三者完全解耦。

---

## 🛠️ 技术栈

| 类别 | 技术 |
|---|---|
| 框架 | React 18 + TypeScript 5.6 |
| 构建 | Vite 6 |
| 样式 | Tailwind CSS 3 |
| 路由 | React Router v6 |
| 语言 | 纯 TypeScript / TSX，无状态管理库 |

---

## 🚀 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器（http://localhost:5173）
npm run dev

# 构建生产版本
npm run build
```

---

## 🎨 色彩语义

在可视化中，不同颜色代表不同的操作状态：

| 颜色 | 含义 |
|---|---|
| 靛蓝 | 当前选中 / 激活元素 |
| 琥珀 | 正在比较的元素 |
| 红色 | 正在交换的元素 |
| 绿色 | 已排序 / 已找到 |
| 紫色 | 基准元素（Pivot） |
| 青色 | 指针位置 |
| 灰蓝 | 已排除区间 |

---

## 📁 目录结构

```
algorithm_visualizer/
├── src/
│   ├── algorithms/steps/        # 各算法的步骤生成器
│   ├── components/               # React 组件
│   │   ├── Home/                 # 首页
│   │   └── AlgorithmPage/        # 算法页（控制面板 + 可视化）
│   ├── constants/algorithms.ts   # 算法元数据注册表
│   ├── engine/PlayerEngine.ts    # 播放引擎
│   ├── hooks/usePlayer.ts        # 核心状态钩子
│   ├── types/                    # TypeScript 类型定义
│   └── utils/                    # 工具函数
├── docs/                         # 设计文档
├── index.html
├── package.json
└── vite.config.ts
```

---

## 🔮 未来规划

- [ ] 链表增删改查可视化
- [ ] 栈与队列操作可视化
- [ ] 更多图算法（拓扑排序、最大流等）
- [ ] 多语言代码对比（C / Python / Java）
- [ ] 用户登录与学习进度记录

---

> **设计理念**：先成为一个练习平台，而非单纯的动画展示器。理解算法最好的方式，是亲手一步步走完它的执行路径。

algorithm_visualizer

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README