最近在重温金庸老爷子的倚天屠龙记，感觉书中的人物关系相对比较清晰，结合到自己的家族复杂的情况，准备做一个人物关系拓扑图。

功能描述

核心需求

  1. 节点：每个人物为一个节点，展示姓名、性别、生卒年份等基本信息
  2. 边：人物之间的关系，如父子、夫妻、师徒、仇敌等，用不同颜色或线型区分
  3. 层级：支持按辈分或门派分组，避免关系线交叉过多
  4. 交互：点击节点展开详情，拖拽调整布局，缩放浏览大图谱

扩展需求

  • 支持导入/导出（JSON 或 CSV），方便维护和备份
  • 时间轴视图：按年代查看人物活跃期
  • 搜索与高亮：快速定位某个人物及其一度关系

设计方案

技术选型

方案优点缺点适用
D3.js + 力导向图灵活、生态成熟需自己处理布局和交互网页端自定义强
vis.js / Cytoscape.js开箱即用的图可视化样式定制略受限快速原型
Neo4j + 可视化原生图数据库，关系查询强需部署数据库数据量大、查询复杂
OmniGraffle / draw.io手动绘制，精细控制不适合动态数据小规模、一次性制图

初步计划：家族关系用 Cytoscape.js 做网页交互版，静态分享图用 OmniGraffle 导出。

数据模型

{
"nodes": [
{ "id": "zhang_san", "name": "张三", "gender": "M", "born": 1920 }
],
"edges": [
{ "source": "zhang_san", "target": "zhang_si", "type": "parent" }
]
}

关系类型枚举：parent、spouse、sibling、master、friend、enemy。

布局策略

  1. 按辈分分层（dagre 层次布局），同辈水平排列
  2. 夫妻关系水平相邻，父子关系垂直连接
  3. 关系线过多时启用边聚合，悬停展开

实施步骤

  1. 整理家族人物清单和关系表（Excel / CSV）
  2. 写脚本将 CSV 转为 JSON 数据文件
  3. 用 Cytoscape.js 实现基础力导向 + 分层布局
  4. 迭代交互：搜索、筛选、详情面板
  5. 导出 PNG / SVG 用于分享

参考

  • 倚天屠龙记人物关系可作为验证数据集，结构清晰、适合调试布局算法
  • 家族图谱需处理再婚、收养、旁支等复杂关系，边类型设计要预留扩展字段