从一张关系网到一座历史数字城我为什么花一天时间徒手造了一个近代人物知识图谱当鲁迅、胡适、梅兰芳、蒋介石同时出现在一张地图上历史突然变得触手可及。一、起因一个书架上落灰的念头上个月整理书房翻出一本旧版的《民国人物传》。翻开第一页鲁迅1881—1936。第二页胡适1891—1962。我突然想——这两个人到底隔着几层关系鲁迅骂过胡适是「丧家的资本家的乏走狗」胡适却说鲁迅是「第一个用白话文写出真正现代小说的人」。他们之间有论战、有敬重、有旧谊但如果你随便问一个路人「鲁迅和胡适是什么关系」大概率只能得到一个模糊的回答「……新文化运动的吧」更别说徐志摩和袁世凯隔了几个人梅兰芳和陈独秀认识吗西南联大那批人彼此之间到底是什么网络市面上不缺历史书不缺人物传记但你很难找到一个工具让你点一个人物瞬间看到他的全部关系网拖动时间轴看到网络在历史变迁中如何演化。于是我决定自己做一个。实际效果HTML附件如需源码请在评论区留下联系方式。二、「数字人文」不该是个高门槛的词学界有个方向叫Digital Humanities数字人文。哈佛有 CBDB中国历代人物传记数据库北大的数字人文研究中心做了大量可视化工作。这些都很厉害但它们要么需要学术权限要么需要编程能力对普通历史爱好者来说门槛太高。我的目标很简单一个 HTML 文件双击打开就能用。不装服务器不配数据库不写 SQL不注册账号。只有一个原则所见即所得所点即所查。从 v1 到 v13这个文件从 18KB 长到了 110KB从单纯的人物关系图变成了一座「数字历史城」。三、它到底能做什么简单说这是一张民国人物的「朋友圈」图谱 中国历史地图 五维人物档案数据库。️ 人物关系图谱核心引擎85 个人物140 条关系以力导向图force-directed graph的形式铺开在画布上。点击任意人物→ 弹出五维档案维度内容示例️ 个性标签人物最精准的概括鲁迅「横眉冷对千夫指」「精神界之战士」 名言本人最有名的一句话胡适「大胆假设小心求证」 代表作主要作品列表茅盾《子夜》‍‍‍ 族谱父母·配偶·子女·师承·学生·友人鲁迅师从章太炎提携萧红 交叉评价同时代人对他的评价陈寅恪评王国维「先生之著述或有时而不章惟此独立之精神历千万祀。」 生平时间线从出生到逝世的关键节点 活动地域在哪些城市生活过鲁迅北京→上海→东京⏳ 关系变迁按十年期分组的关系变化可点击跳转拖动时间轴滑块→ 图谱动态变化。1930 年左联刚刚成立鲁迅和茅盾连在一起。1937 年抗战爆发蒋介石和毛泽东从图谱两端走向中心。六度径路搜索→ 输入任意两个人一秒找到最短路径。徐志摩到鲁迅只需要 1 步论战张爱玲到袁世凯呢也只有 2 步。️ 中国历史地图v13 新增14 个城市按真实经纬度标注在 SVG 地图上28 个省份标签长江和黄河蜿蜒而过。点击地图上的北京→ 北洋政府到新中国的政治中心。点击上海→ 左翼文学的大本营张爱玲笔下的孤岛。点击昆明→ 西南联大战火中保存学术火种的地方。地图还支持时间区间筛选切换到「抗战」时间区间延安点亮南京暗淡图谱与地图联动。 AI 史观分析图谱自动计算三个指标桥接人物中介中心度 Top 5—— 谁是连接不同圈层的「枢纽」社群圈层自动聚类 8 个圈层—— 新文化派、左翼、新月派、京派、海派、国学圈、政军界、艺术界中心度排行按连接数排序 Top 10—— 谁是社交网络中最核心的人答案不意外但很直观蔡元培、胡适、鲁迅常年占据桥接人物前三——他们是那个时代的「超级节点」。️ 智能数据库搜索「作家」一键过滤出所有作家人物显示简要档案。搜索一个不在库中的人名比如「曾国藩」自动调用维基百科 API 抓取资料。 工具集导出/导入 JSON五维档案可交换维基百科人物搜索CBDB 数据库查询哈佛北大数字人文研究中心链接 9 套主题深空、古籍、墨韵、夜蓝、林间、玫瑰、系统浅色、macOS 风格、仿古风从科技感到书卷气从 Apple 原生到明清刻本总有一款适合你。四、技术架构一个 HTML 文件的艺术有人问110KB 能做这么多事是的全部装在一个 HTML 文件里。技术栈层技术用途渲染引擎ECharts 5.5力导向图 交互矢量地图Inline SVG中国地图 城市标记数据存储JavaScript 对象 localStorage人物/关系/事件数据 头像缓存外部 APIWikipedia REST API CBDB API自动搜索补充样式CSS Variables backdrop-filter9 套主题 毛玻璃效果打包单文件 HTML零依赖双击即用设计原则离线优先。所有核心数据85 人物、140 关系、15 大事件、11 城市、28 省份全部硬编码在 HTML 中。没有网络也能完整使用。渐进增强。有网则自动加载 Wikipedia 真实人物头像并缓存到 localStorage下次开启直接命中。一切皆可交互。节点可点、边可点、地图可点、年代可点、语录可点——没有一个静态元素。所见即所得。点击人物→右侧弹窗点击关系→史料原文点击圈层→筛选点击时间→图谱刷新。数据结构简化人物 { 姓名, 社群, 圈层, 标签, 名言, 作品, 族谱, 生平, 交叉评价, 活动地域 } 关系 { 主体, 客体, 类型, 描述, 年份, 置信度, 史料原文 } 事件 { 名称, 年份, 标签, 描述 }数据以数组形式保存在 JS 中通过Map索引整个查询在毫秒级完成。五、演进之路从 v1 到 v13 的 13 步版本亮点文件大小v1原型简单人物连线18KBv2六度径路搜索42KBv3深度档案生平族谱56KBv4HSNIS 命名UI 重构47KBv550 人物完整时间线66KBv6史料原文锚点无征不信55KBv7人物头像 个性标签59KBv8五维档案 交叉评价 4 主题60KBv9城市节点 活动地域 关系变迁71KBv10事件图谱 Wikipedia 搜索 导入导出85KBv11中国地图 毛玻璃 UI 头像缓存93KBv12数据库 全选/全不选 3 新主题104KBv13完整中国全图 14 城市 28 省 河流110KB每个版本的迭代都来自同一个动力离「一个文件夹打开的数字人文实验室」更近一步。六、未来路标阶段计划v14人物关系时间线动画图谱随时间自动播放v15人物画像画廊所有人物卡片一览v16自定义添加人物/关系图形化编辑v17接入 CBDB 完整人物数据API 自动扩增v18关系强度计算基于史料频次加权利度值更长线从「近代人物」扩展到「中国历代人物」从「单文件」到「PWA 渐进式 Web 应用」开放数据导出标准格式七、给你的话我做这个项目不是为了证明技术有多强而是因为一个很朴素的想法历史不是编年体的罗列而是人与人的网络。沈从文一句话说得真好「我行过许多地方的桥看过许多次数的云喝过许多种类的酒却只爱过一个正当最好年龄的人。」每个历史人物何尝不是如此他们穿过山河、拜过师门、吵过架、喝过酒、在同一个时代写下各自的篇章。史脉·经纬就是想把这些「桥」画出来。项目地址一个 HTML 文件双击即开。数据来源Wikipedia / CBDB / 史料原文摘录技术框架ECharts 原生 JavaScript Inline SVG适用场景历史爱好者、人文研究者、教育演示、数据可视化爱好者如果你喜欢这个项目欢迎分享给同样对历史与可视化感兴趣的朋友。一个人的网络是小径一群人的网络才是历史。