7.2 KiB
7.2 KiB
K-Means 算法演示页面 - 快速开始
🎯 功能概览
这是一个完整的 K-Means 聚类算法可视化演示工具，集成在您的打字练习网站中。
✨ 核心功能
| 功能 | 说明 |
|---|---|
| 🎨 可视化画布 | 800x600 像素的交互式画布 |
| 🎲 随机生成点 | 可生成 1-200 个随机数据点 |
| 🖱️ 交互操作 | 左键添加点/质心，右键清空 |
| 🎯 K值调节 | 支持 1-10 个聚类中心 |
| 📊 算法演示 | 逐步展示 K-Means 算法过程 |
| 📏 距离可视化 | 实时显示点到质心的距离 |
| 📑 坐标显示 | 可选显示所有点的坐标 |
| 💾 Excel支持 | 导入/导出数据到 Excel 文件 |
🚀 快速开始
步骤 1: 访问页面
- 开发环境: http://localhost:3001/kmeans
- 导航入口: 点击网站顶部导航栏的 "K-Means演示"
步骤 2: 基础操作
-
设置参数
K值: 3 (想要分成几个簇) 点的数量: 50 -
生成数据
- 点击 "生成随机点" 按钮
-
设置质心
- 在画布上点击 3 次（与K值相同）
- 每个质心会用不同颜色标识
-
运行算法
- 点击 "执行一步" 按钮
- 观察算法逐步执行过程
-
保存结果
- 点击 "导出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++ 的重要性
⚠️ 注意事项
- 质心数量: 必须设置完整的 K 个质心才能开始算法
- 算法运行中: 无法修改参数或添加新点
- 右键操作: 会清空整个画布，请谨慎使用
- 浏览器兼容: 需要支持 Canvas API 的现代浏览器
- 性能考虑: 建议点的数量不超过 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 算法的魅力！ 🚀