词族星系 STELLA

「词族星系」是一个用于展示单词的词族关系的页面。

词族星系 STELLA

提示

也可通过下方链接卡片访问。

JPRoots STELLA

功能介绍

网站结构：

1. 顶层控制栏
   包含顶部的搜索框、右下角的缩放工具（支持鼠标滚轮控制）、左下角性能栏、主题胶囊。
2. 主画布
   D3.js 渲染 SVG 的核心区域，承载数以千计（预计）的词族和单词星星体。
3. 小星图
   位于右上角的缩略图，用于在庞大的星系中快速定位当前视角。
4. 单词弹窗
   点击单词星体时弹出，提供「跳转 JLDB 查询」按钮，联动 JLDB，自动填入词汇，选词即可查询。

外观设计：

1. 液态玻璃
   所有元素均借鉴液态玻璃设计美学，营造悬浮在深空中的玻璃质感。
2. 引力涟漪
   动态绘制波纹扩散效果，鼠标悬停时触发，模拟天体引力场的视觉反馈。
3. 深空微粒
   利用底层 Canvas 绘制微小的漂浮粒子，增强宇宙的深邃感。
4. 多彩配色
   提供 30+ 种预设配色方案，提供随机配色按钮。
5. 划分星等
   根据词族下辖单词的数量动态设定节点的大小，区分了 5 种星体大小。

特色功能：

1. JLDB 联动
   利用已有的辞典底层数据，读取单词和词族字段，单词弹窗可跳转至 JLDB 查询。
2. D3 物理引擎
   依赖 D3.js 模拟物理宇宙。包含星体间的引力、斥力、中心力以及防穿模的碰撞检测。
3. 性能优化（LOD）
   当词族数量过多时，只渲染当前屏幕内的节点；当缩放比例过小时，自动隐藏文字标签和引力涟漪动画，提升流畅度。
4. 小星图控制
   监听主画布的拖拽事件，实时计算视口坐标比例，并在小星图上绘制红色矩形框，支持通过拖拽红框以反向控制主画布的坐标移动。
5. 多星引力事件
   配合 JLDB 新更新的多词族拆分，如果一个单词同时由多个词族组成，在星图中，这颗单词星体会与特定的多个词族建立关联，被多股引力共同牵引。
6. 自适应展开
   单词星体的形状与文字同步淡入放大；与词族星体的距离动态计算，解决单词星体与词族星体的拥挤重叠问题。