115 lines
3.9 KiB
Markdown
115 lines
3.9 KiB
Markdown
# K-Means 聚类算法演示页面使用说明
|
||
|
||
## 功能概述
|
||
|
||
本页面提供了一个可视化的 K-Means 聚类算法演示工具，帮助用户理解和学习 K-Means 算法的工作原理。
|
||
|
||
## 访问地址
|
||
|
||
- 开发环境: http://localhost:3001/kmeans
|
||
- 生产环境: https://your-domain.com/kmeans
|
||
|
||
## 主要功能
|
||
|
||
### 1. 画布操作
|
||
|
||
- **随机生成点**: 点击"生成随机点"按钮，可以根据设置的数量自动生成随机分布的数据点
|
||
- **手动添加点**:
|
||
- 设置好K个质心后，左键点击画布可以添加新的数据点
|
||
- 右键点击画布清空所有内容
|
||
- **设置质心**: 在设置K值后，前K次左键点击会设置质心点（每个质心用不同颜色标识）
|
||
|
||
### 2. 参数控制
|
||
|
||
- **点的数量**: 控制随机生成时的点数（1-200）
|
||
- **K值**: 设置聚类的簇数量（1-10）
|
||
- **显示坐标**: 勾选复选框可以显示每个点和质心的坐标值
|
||
|
||
### 3. 算法演示
|
||
|
||
点击"执行一步"按钮，系统会逐步演示 K-Means 算法：
|
||
|
||
**步骤说明**:
|
||
1. **距离计算阶段**:
|
||
- 对每个数据点，依次计算到各个质心的距离
|
||
- 用线段连接点和质心，并在线段中央显示距离值
|
||
- 所有距离计算完成后，高亮显示最短距离的线段（绿色）
|
||
- 其他线段逐一消除
|
||
|
||
2. **簇分配**:
|
||
- 将点分配给距离最近的质心
|
||
- 点的颜色会变成所属质心的颜色
|
||
|
||
3. **质心更新**:
|
||
- 所有点处理完后，重新计算每个簇的质心位置
|
||
- 质心移动到该簇所有点的几何中心
|
||
|
||
4. **迭代收敛**:
|
||
- 重复步骤1-3，直到各簇成员不再变化
|
||
- 显示"K-Means算法收敛，聚类完成！"提示
|
||
|
||
### 4. 数据导入导出
|
||
|
||
- **导出到Excel**: 点击"导出Excel"按钮，将当前所有点和质心的坐标保存到Excel文件
|
||
- **从Excel导入**: 点击"导入Excel"按钮，从Excel文件读取点的坐标，导入后会清空原有内容
|
||
|
||
Excel 文件格式：
|
||
```
|
||
类型 | 索引 | X坐标 | Y坐标 | 所属簇/颜色
|
||
数据点 | 1 | 123.45 | 234.56 | 簇1
|
||
质心 | 1 | 400.00 | 300.00 | #FF6B6B
|
||
```
|
||
|
||
### 5. 其他操作
|
||
|
||
- **清空画布**: 清除所有数据点和质心
|
||
- **暂停/继续**: 在算法运行过程中可以逐步查看每一步的效果
|
||
|
||
## 使用流程示例
|
||
|
||
1. 设置 K=3（想要分成3个簇）
|
||
2. 点击"生成随机点"生成50个随机点
|
||
3. 在画布上点击3次，设置3个质心位置
|
||
4. 勾选"显示坐标"查看坐标信息（可选）
|
||
5. 点击"执行一步"开始算法演示
|
||
6. 持续点击"执行一步"观察算法过程
|
||
7. 算法完成后，可以点击"导出Excel"保存结果
|
||
|
||
## 技术实现
|
||
|
||
- **前端框架**: React 18.2.0 + TypeScript 4.9.5
|
||
- **UI组件**: Ant Design 5.21.6
|
||
- **绘图**: HTML5 Canvas API
|
||
- **数据处理**: xlsx 库用于 Excel 导入导出
|
||
|
||
## 注意事项
|
||
|
||
1. 质心数量K必须设置完成后才能开始算法演示
|
||
2. 算法运行过程中无法修改参数或添加点
|
||
3. 右键清空操作会清除所有内容，请谨慎使用
|
||
4. Excel 导入时会覆盖当前画布内容
|
||
5. 建议K值不要设置过大（推荐2-5），以便更好地观察效果
|
||
|
||
## 常见问题
|
||
|
||
**Q: 为什么点击"执行一步"没有反应？**
|
||
A: 请确保已经设置了K个质心点，质心数量必须等于设置的K值。
|
||
|
||
**Q: 如何重新开始演示？**
|
||
A: 点击"清空画布"按钮，然后重新设置质心和数据点。
|
||
|
||
**Q: 算法什么时候会结束？**
|
||
A: 当各个簇的成员不再变化时，算法自动停止并提示"聚类完成"。
|
||
|
||
**Q: 可以手动设置质心位置吗？**
|
||
A: 可以，在设置K值后，前K次点击画布会设置质心位置，您可以选择任意位置。
|
||
|
||
## 扩展功能建议
|
||
|
||
未来可以考虑添加：
|
||
- 自动运行模式（不需要手动点击每一步）
|
||
- 调整动画速度
|
||
- 多种初始化质心的方法（K-Means++等）
|
||
- 显示迭代历史和收敛曲线
|
||
- 支持导入更多格式的数据文件
|