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