# 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++等）
- 显示迭代历史和收敛曲线
- 支持导入更多格式的数据文件