Skip to content

元素周期表

交互式周期表浏览器,支持按属性着色,并提供全部 118 种元素的完整数据。

Source: src/lib/periodic-table/, src/lib/element/

组件

组件说明
PeriodicTable.svelte完整交互式周期表
PeriodicTableControls.svelte属性选择器和颜色标尺控制
PropertySelect.svelte用于选择显示属性的下拉框
TableInset.svelte图例/颜色标尺嵌入视图
ElementTile.svelte显示元素符号和值的单个元素格

Element Detail 组件

组件说明
ElementHeading.svelte元素名称、符号和原子序数
ElementPhoto.svelte元素外观图片
ElementStats.svelte包含完整数据的属性表
BohrAtom.svelteBohr 原子模型示意图
Nucleus.svelte原子核可视化

Element Database

元素数据库(src/lib/element/data.ts)包含全部 118 种元素的完整数据:

可用属性

CategoryProperties
身份信息元素符号、名称、原子序数
MassAtomic mass (u)
半径原子半径、共价半径、离子半径(A)
ElectronegativityPauling scale
位置周期(行)、族(列)、区块(s/p/d/f)
分类金属、非金属、类金属、稀有气体、卤素、过渡金属、镧系、锕系、碱金属、碱土金属
物理性质熔点、沸点、密度、比热
电子性质电子排布、电离能、电子亲和能
发现历史发现者、发现年份
外观描述和颜色

功能

  • 按属性着色 — 根据任意数值属性给元素着色(电负性、原子半径、密度等)
  • 颜色标尺 — viridis、plasma、turbo 以及其他 D3 颜色插值器
  • 点击选择 — 查看完整元素详情
  • 悬停提示 — 快速预览属性
  • 类别高亮 — 高亮元素类别(金属、非金属等)
  • 响应式布局 — 适配容器尺寸

基于 AGPL-3.0-or-later 许可证发布。