🌌 数学天赋星图 · Math Skill Tree

702 颗星体 × 23 个星座领域 × 1002 条知识脉络

项目已上线，直接访问 https://wizarot.github.io/math-tree 即可体验两个视图。

源码仓库：https://github.com/wizarot/math-tree

23 条彩色射线从中央罗盘向外辐射，构成一个可漫游的知识星系：

左侧筛选面板支持按星座领域、年龄段（4–6 / 7–9 / 10–12 / 13+）、课标标记、关键词多维度过滤，实时高亮匹配星体。

放大后可以看到每条射线上的星体符号细节和领域名称标签：

中央罗盘镌刻欧拉公式 e^(iπ) + 1 = 0，周围环绕数学家姓名（Euler、Gauss、Riemann…），象征整个数学宇宙的核心基石。

点击任意星体，右侧弹出详情面板，展示完整的知识点信息：

面板包含：

• 描述 — 知识点的中文释义与核心概念
• 掌握证据（判定标准） — 具体可操作的验证方式
• 评估提示（出题疑点） — 给家长/老师的考察建议
• 硬性前置 / 后续星体 — 依赖链路一览

按年龄递进排列成「学习之河」，从左到右 = 学习顺序，沿轨道从上到下 = 同一领域纵向深化：

左侧图例列出全部 23 个领域及节点数量，点击可快速筛选单列。顶部实时显示点亮进度百分比。

横向拖拽可浏览更多领域列：

完整 23 个领域全景如下：

两个视图通过顶部按钮互相切换，共享同一份学习进度。

🔘 青铜暗盘 ── 未解锁（有未掌握的硬性前置）
🔵 青色呼吸 ── 可学    （所有前置已点亮，等待学习）
💜 紫罗兰霓虹 ── 已掌握（点燃后点亮外圈稀有度光环）

💡 不同状态的星体在 星图局部放大截图 中可以清晰对比看到。

稀有度根据知识图谱中心度（连接边数）自动计算：

1. Fork 本仓库到你的 GitHub 账号
2. 进入仓库 Settings → Pages
3. Source 选择 Deploy from a branch
4. Branch 选择 main / master，目录选 / (root)，保存
5. 部署完成后访问 https://wizarot.github.io/math-tree 即可体验 ✅

因为用到了 fetch() 加载 JSON，不能直接双击 index.html（CORS 限制），需要一个本地静态服务器：

# Python 3（推荐，零安装）
python -m http.server 8000

# Node.js（需安装 http-server）
npx http-server -p 8000

# 或 VS Code Live Server 插件
# 右键 index.html → Open with Live Server

然后浏览器打开 http://127.0.0.1:8000/index.html

math-tree/
├── index.html              # 🌀 主入口：径向星图 Galaxy 2D
├── index.ordered.html      # 📊 有序视图：按年龄技能树排列
├── preview-radial.png      # 🖼️ README 预览图
├── preview-ordered.png     # 🖼️ 有序视图预览图
│
├── data/                   # 📦 知识图谱数据
│   ├── math-topics.json        # 702 个知识点（含中文翻译/课标/年龄段）
│   └── math-dependencies.json  # 1002 条依赖边（hard/soft 前置）
│
├── assets/                 # 🎨 静态资源
│   ├── compass.png             # 中心罗盘（金色复古风）
│   ├── node.png / nodec.png    # 星体圆盘（青铜暗盘 / 金光亮盘）
│   ├── left.png                # 侧边栏羊皮纸背景
│   ├── orb_cyan/orange/pink/purple.png  # 图例辉光球
│   ├── mtf-sprite.svg          # SVG 符号精灵图（702 个数学符号）
│   └── symbols/                # 独立 SVG 符号源文件
│
├── vendor/                 # 📚 第三方库
│   └── vis-network.min.js      # 有序视图用可视化引擎
│
└── scripts/                # 🔧 数据生成脚本（可选，开发者用）
    ├── prepare_math.py         # 数学知识点预处理
    ├── augment_curriculum.py   # 课标数据对齐
    └── augment_secondary.py    # 中学内容扩展

每条彩色射线就是一个独立的知识星座

中心是整个数学宇宙的核心基石，知识点沿扇形射线向外辐射：

• 由内到外 = 年龄与学习顺序递增
• 同一射线由内到外 = 同一领域知识纵向深化
• 扇形比例 = 该领域知识点数量的加权平方根（避免极端比例）

为了让 700+ 节点在 Canvas 上 60fps 流畅运行，做了这些工程优化：

欢迎通过 Issue / PR 参与贡献！

• 🧮 补充知识点：修复描述、完善掌握证据、补充评估提示
• 🇨🇳 校对中文翻译：标记为「⚠ 待校对」的节点需要人工核实
• 🎒 扩展课标：增加苏教版、北师大版等其他课标标记
• 🎨 UI/UX 改进：动画优化、移动端适配、无障碍访问
• 🐛 Bug 修复：发现问题请提 Issue 附截图/复现步骤

# 1. Fork + Clone
git clone https://github.com/wizarot/math-tree.git
cd math-tree

# 2. 起一个本地服务器
python -m http.server 8000

# 3. 改代码 → 浏览器刷新预览 → 提 PR

如果这个项目对你有启发，请给它一颗 ⭐ Star

给数学学习一张全局地图，让每一步都看得见方向。