本项目是一款面向高中生物教学的交互式遗传系谱图学习工具,帮助学生直观理解孟德尔遗传规律、绘制系谱图并计算子代患病概率。
核心功能模块包括:
1. 人物管理系统:支持添加、编辑、删除家族成员,设置姓名、性别、世代、患病状态及基因型。
2. 四种遗传模式:常染色体隐性(AR)、常染色体显性(AD)、X连锁隐性(XLR)、X连锁显性(XLD)。
3. 可视化系谱图:SVG动态绘制家族关系图,方形代表男性、圆形代表女性、实心表示患病,自动生成父母-子代连线,支持缩放与拖拽。
4. 子代概率计算器:根据父母基因型自动计算子代患病、携带和正常的概率,支持指定子代性别或按1:1加权计算。
5. 数据持久化:支持导出/导入JSON格式系谱数据,方便保存与分享。
6. 深色/浅色主题切换:自动适应系统偏好或手动切换。
本项目采用原生HTML/CSS/JavaScript实现,零依赖,核心使用SVG动态绘图与遗传学概率算法。
我的主要工作包括:
1. 整体架构设计:单页面应用结构,左侧为人物编辑面板,右侧为SVG系谱图画布,底部为概率计算器。
2. SVG系谱图引擎:手写布局算法(按世代分层、自动计算节点坐标),动态生成父母-子代连线,支持节点点击回填编辑、hover信息提示。
3. 遗传概率计算引擎:实现完整的孟德尔遗传模拟算法,处理配子生成、基因型组合、表现型判定,支持常染色体和性染色体遗传的四种模式。
4. 画布交互系统:实现鼠标拖拽平移、滚轮缩放(以光标为中心)、空格键平移等交互,缩放范围限制0.3x-3x。
5. 基因型动态选择:根据当前遗传模式和人物性别,动态生成可选基因型列表,降低学习门槛。
6. 数据导入导出:JSON格式保存/加载系谱数据,便于课堂分享和作业提交。
遇到的难点:X连锁遗传的性别差异计算逻辑较为复杂,通过拆分配子生成、表现型判定为独立函数解决;SVG画布拖拽与节点点击事件的冲突,通过事件目标判断和g元素层级管理解决。