Migrate project from typing_practiceweb
This commit is contained in:
271
KMEANS_QUICKSTART.md
Normal file
271
KMEANS_QUICKSTART.md
Normal file
@@ -0,0 +1,271 @@
|
||||
# K-Means 算法演示页面 - 快速开始
|
||||
|
||||
## 🎯 功能概览
|
||||
|
||||
这是一个完整的 K-Means 聚类算法可视化演示工具，集成在您的打字练习网站中。
|
||||
|
||||
### ✨ 核心功能
|
||||
|
||||
| 功能 | 说明 |
|
||||
|------|------|
|
||||
| 🎨 **可视化画布** | 800x600 像素的交互式画布 |
|
||||
| 🎲 **随机生成点** | 可生成 1-200 个随机数据点 |
|
||||
| 🖱️ **交互操作** | 左键添加点/质心，右键清空 |
|
||||
| 🎯 **K值调节** | 支持 1-10 个聚类中心 |
|
||||
| 📊 **算法演示** | 逐步展示 K-Means 算法过程 |
|
||||
| 📏 **距离可视化** | 实时显示点到质心的距离 |
|
||||
| 📑 **坐标显示** | 可选显示所有点的坐标 |
|
||||
| 💾 **Excel支持** | 导入/导出数据到 Excel 文件 |
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 步骤 1: 访问页面
|
||||
|
||||
- **开发环境**: http://localhost:3001/kmeans
|
||||
- **导航入口**: 点击网站顶部导航栏的 "K-Means演示"
|
||||
|
||||
### 步骤 2: 基础操作
|
||||
|
||||
1. **设置参数**
|
||||
```
|
||||
K值: 3 (想要分成几个簇)
|
||||
点的数量: 50
|
||||
```
|
||||
|
||||
2. **生成数据**
|
||||
- 点击 "生成随机点" 按钮
|
||||
|
||||
3. **设置质心**
|
||||
- 在画布上点击 3 次（与K值相同）
|
||||
- 每个质心会用不同颜色标识
|
||||
|
||||
4. **运行算法**
|
||||
- 点击 "执行一步" 按钮
|
||||
- 观察算法逐步执行过程
|
||||
|
||||
5. **保存结果**
|
||||
- 点击 "导出Excel" 保存数据
|
||||
|
||||
## 📖 使用示例
|
||||
|
||||
### 示例 1: 基础聚类
|
||||
|
||||
```
|
||||
目标: 将 50 个点分成 3 个簇
|
||||
|
||||
操作:
|
||||
1. K值 = 3
|
||||
2. 点的数量 = 50
|
||||
3. 生成随机点
|
||||
4. 点击画布 3 次设置质心
|
||||
5. 持续点击"执行一步"直到完成
|
||||
```
|
||||
|
||||
### 示例 2: 手动创建数据
|
||||
|
||||
```
|
||||
目标: 手动创建特定分布的数据
|
||||
|
||||
操作:
|
||||
1. K值 = 2
|
||||
2. 在画布左侧点击 2 次设置质心
|
||||
3. 在画布不同区域手动点击添加数据点
|
||||
4. 勾选"显示坐标"查看具体位置
|
||||
5. 执行算法查看聚类结果
|
||||
```
|
||||
|
||||
### 示例 3: 导入已有数据
|
||||
|
||||
```
|
||||
目标: 使用之前保存的数据
|
||||
|
||||
操作:
|
||||
1. 点击"导入Excel"
|
||||
2. 选择之前导出的 Excel 文件
|
||||
3. 数据自动加载到画布
|
||||
4. 继续执行算法或修改数据
|
||||
```
|
||||
|
||||
## 🎨 界面说明
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ 控制面板 │
|
||||
│ [点数] [生成] [K值] [☑显示坐标] [执行] [清空] │
|
||||
│ [导出Excel] [导入Excel] │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 画布区域 │
|
||||
│ (800 x 600 像素) │
|
||||
│ │
|
||||
│ ● 灰色点 = 未分配的数据点 │
|
||||
│ ● 彩色点 = 已分配到簇的点 │
|
||||
│ ◉ 大圆圈 = 质心点 (标记为 C1, C2, ...) │
|
||||
│ ─── 线段 = 距离连线（显示数值） │
|
||||
│ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ 操作说明 │
|
||||
│ • 左键: 添加点/质心 │
|
||||
│ • 右键: 清空画布 │
|
||||
│ • 当前迭代: 0 │
|
||||
│ • 状态: 等待开始 │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 🔍 算法过程详解
|
||||
|
||||
### 阶段 1: 初始化
|
||||
- 设置 K 个质心点
|
||||
- 生成或添加数据点
|
||||
|
||||
### 阶段 2: 分配簇（点击"执行一步"）
|
||||
```
|
||||
对于每个数据点:
|
||||
1. 计算到所有质心的距离 (显示线段和数值)
|
||||
2. 找出最短距离 (高亮显示为绿色)
|
||||
3. 将点分配给最近的质心 (点变成质心颜色)
|
||||
4. 清除距离线，处理下一个点
|
||||
```
|
||||
|
||||
### 阶段 3: 更新质心
|
||||
```
|
||||
当所有点处理完毕:
|
||||
1. 计算每个簇的几何中心
|
||||
2. 移动质心到新的位置
|
||||
3. 检查是否收敛
|
||||
```
|
||||
|
||||
### 阶段 4: 迭代或结束
|
||||
```
|
||||
如果质心位置改变:
|
||||
→ 返回阶段 2，继续下一轮迭代
|
||||
|
||||
如果质心位置不变:
|
||||
→ 算法收敛，显示"聚类完成"
|
||||
```
|
||||
|
||||
## 📁 Excel 文件格式
|
||||
|
||||
导出的 Excel 文件包含以下列：
|
||||
|
||||
| 列名 | 说明 | 示例 |
|
||||
|------|------|------|
|
||||
| 类型 | 数据点或质心 | 数据点 / 质心 |
|
||||
| 索引 | 编号 | 1, 2, 3... |
|
||||
| X坐标 | 横坐标值 | 123.45 |
|
||||
| Y坐标 | 纵坐标值 | 234.56 |
|
||||
| 所属簇/颜色 | 簇编号或颜色代码 | 簇1 / #FF6B6B |
|
||||
|
||||
## ⌨️ 键盘快捷键
|
||||
|
||||
| 操作 | 快捷键 |
|
||||
|------|--------|
|
||||
| 清空画布 | 右键点击画布 |
|
||||
| 添加点 | 左键点击画布 |
|
||||
|
||||
## 💡 使用技巧
|
||||
|
||||
### 技巧 1: 观察收敛过程
|
||||
- 每次点击"执行一步"只处理一个点
|
||||
- 可以清楚看到每个点如何选择最近的质心
|
||||
- 适合教学演示
|
||||
|
||||
### 技巧 2: 测试不同 K 值
|
||||
```
|
||||
相同数据，不同K值的效果:
|
||||
K=2: 粗分类
|
||||
K=3: 中等细分
|
||||
K=5: 细分类
|
||||
```
|
||||
|
||||
### 技巧 3: 保存实验数据
|
||||
- 每次实验后导出 Excel
|
||||
- 可以在不同场景下重复使用相同数据
|
||||
- 便于比较不同参数的效果
|
||||
|
||||
### 技巧 4: 质心初始化的影响
|
||||
- 尝试在不同位置设置初始质心
|
||||
- 观察对最终聚类结果的影响
|
||||
- 理解 K-Means++ 的重要性
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
1. **质心数量**: 必须设置完整的 K 个质心才能开始算法
|
||||
2. **算法运行中**: 无法修改参数或添加新点
|
||||
3. **右键操作**: 会清空整个画布，请谨慎使用
|
||||
4. **浏览器兼容**: 需要支持 Canvas API 的现代浏览器
|
||||
5. **性能考虑**: 建议点的数量不超过 200 个
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
**Q: 为什么点击"执行一步"没反应？**
|
||||
```
|
||||
检查清单:
|
||||
☐ 是否已设置了 K 个质心？
|
||||
☐ 质心数量是否等于设置的 K 值？
|
||||
☐ 是否有数据点？
|
||||
```
|
||||
|
||||
**Q: 如何重新开始？**
|
||||
```
|
||||
方法 1: 点击"清空画布"按钮
|
||||
方法 2: 右键点击画布
|
||||
然后重新设置质心和数据点
|
||||
```
|
||||
|
||||
**Q: Excel 导入失败？**
|
||||
```
|
||||
检查文件格式:
|
||||
☐ 文件扩展名是 .xlsx 或 .xls
|
||||
☐ 包含必需的列（类型、X坐标、Y坐标）
|
||||
☐ 数值格式正确
|
||||
```
|
||||
|
||||
**Q: 算法什么时候停止？**
|
||||
```
|
||||
停止条件:
|
||||
• 各簇成员不再变化
|
||||
• 质心位置稳定
|
||||
• 显示"聚类完成"提示
|
||||
```
|
||||
|
||||
## 🎓 教学场景
|
||||
|
||||
### 场景 1: 课堂演示
|
||||
```
|
||||
时间: 15-20分钟
|
||||
内容:
|
||||
1. 介绍 K-Means 基本概念 (5分钟)
|
||||
2. 现场演示算法过程 (10分钟)
|
||||
3. 讨论初始化和收敛 (5分钟)
|
||||
```
|
||||
|
||||
### 场景 2: 实验课
|
||||
```
|
||||
时间: 45-60分钟
|
||||
任务:
|
||||
1. 不同 K 值的效果对比
|
||||
2. 初始质心位置的影响
|
||||
3. 记录迭代次数和结果
|
||||
4. 提交实验报告（导出Excel）
|
||||
```
|
||||
|
||||
### 场景 3: 自学练习
|
||||
```
|
||||
学习路径:
|
||||
1. 阅读 KMEANS_README.md
|
||||
2. 完成基础示例操作
|
||||
3. 尝试不同参数组合
|
||||
4. 理解算法原理
|
||||
```
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- **KMEANS_README.md** - 详细使用说明
|
||||
- **KMEANS_DEPLOYMENT.md** - 部署和配置指南
|
||||
|
||||
## 🔗 访问链接
|
||||
|
||||
开发环境: http://localhost:3001/kmeans
|
||||
|
||||
立即体验 K-Means 算法的魅力！ 🚀
|
||||
Reference in New Issue
Block a user