当前位置：首页 > news >正文

使用D3.js画人物关系图

news 2025/10/5 5:45:35

文章目录

- 简介
- 具体功能
- - 待处理问题
  - 可用模板
  - - 模板格式数据
    - AI生成测试数据
    - 效果图（ps:具体数据准确度存疑……）
- GitHub Page HTML访问路径

简介

使用了 D3.js 工具，参考了这个项目：https://github.com/aelooee/red-dream-network-Tr，效果详见：https://aelooee.github.io/red-dream-network-Tr/，但是这里用的是力导向布局，不是我想要的效果，我想要是树形布局。

AI时代，总不能我自己手动撸吧！于是就用智谱清言、腾讯元宝生成了一个，并不断优化。

具体功能

按照依赖关系，画父子节点。
鼠标悬浮显示具体信息。
支持搜索定位到对应节点。
适配手机端。

待处理问题

缩放后，悬浮/点击时，提示窗位置不够好。
手机端部分UI适配问题有待进一步完善。

可用模板

GitHub项目：https://github.com/yansheng836/figure-relationship-diagram

可用模板：index_fixed5-各模块分开.html+css+js+data，data可以参考 data/main-example.json 格式，让AI根据xx人物关系，写一个同格式的数据放进去。

模板格式数据

{"nodes": [{ "id": 1, "name": "张国强", "gender": "male", "generation": 1, "birth": "1920", "death": "1995", "occupation": "企业家", "introduction": "",  "avatar": "👴" },{ "id": 2, "name": "李秀英", "gender": "female", "generation": 1, "birth": "1925", "death": "2000", "occupation": "教师", "introduction": "",  "avatar": "👵" },{ "id": 3, "name": "张建国", "gender": "male", "generation": 2, "birth": "1950", "occupation": "工程师", "introduction": "",  "avatar": "👨", "parents": [1, 2] },{ "id": 4, "name": "王丽华", "gender": "female", "generation": 2, "birth": "1952", "occupation": "医生", "introduction": "",  "avatar": "👩", "spouse": 3 },{ "id": 5, "name": "张建华", "gender": "male", "generation": 2, "birth": "1953", "occupation": "律师",  "introduction": "", "avatar": "👨", "parents": [1, 2] },{ "id": 6, "name": "赵美玲", "gender": "female", "generation": 2, "birth": "1955", "occupation": "会计", "introduction": "",  "avatar": "👩", "spouse": 5 },{ "id": 7, "name": "张建民", "gender": "male", "generation": 2, "birth": "1957", "occupation": "教授",  "introduction": "", "avatar": "👨", "parents": [1, 2] },{ "id": 8, "name": "陈小芳", "gender": "female", "generation": 2, "birth": "1958", "occupation": "护士",  "introduction": "", "avatar": "👩", "spouse": 7 },{ "id": 9, "name": "张小明", "gender": "male", "generation": 3, "birth": "1978", "occupation": "软件工程师", "introduction": "",  "avatar": "👦", "parents": [3, 4] },{ "id": 10, "name": "张小红", "gender": "female", "generation": 3, "birth": "1980", "occupation": "设计师",  "introduction": "", "avatar": "👧", "parents": [3, 4] },{ "id": 11, "name": "张小军", "gender": "male", "generation": 3, "birth": "1982", "occupation": "金融分析师", "introduction": "",  "avatar": "👦", "parents": [5, 6] },{ "id": 12, "name": "张小丽", "gender": "female", "generation": 3, "birth": "1984", "occupation": "市场经理", "introduction": "",  "avatar": "👧", "parents": [5, 6] },{ "id": 13, "name": "张小伟", "gender": "male", "generation": 3, "birth": "1985", "occupation": "创业者", "introduction": "",  "avatar": "👦", "parents": [7, 8] },{ "id": 14, "name": "张小芳", "gender": "female", "generation": 3, "birth": "1987", "occupation": "记者", "introduction": "",  "avatar": "👧", "parents": [7, 8] },{ "id": 15, "name": "张天天", "gender": "male", "generation": 4, "birth": "2005", "occupation": "学生", "introduction": "",  "avatar": "👶", "parents": [9] },{ "id": 16, "name": "张乐乐", "gender": "female", "generation": 4, "birth": "2008", "occupation": "学生", "introduction": "",  "avatar": "👶", "parents": [9] },{ "id": 17, "name": "张思思", "gender": "female", "generation": 4, "birth": "2010", "occupation": "学生", "introduction": "",  "avatar": "👶", "parents": [11] },{ "id": 18, "name": "张明明", "gender": "male", "generation": 4, "birth": "2012", "occupation": "学生", "introduction": "",  "avatar": "👶", "parents": [13] }],"links": [{ "source": 1, "target": 2, "type": "spouse" },{ "source": 3, "target": 4, "type": "spouse" },{ "source": 5, "target": 6, "type": "spouse" },{ "source": 7, "target": 8, "type": "spouse" },{ "source": 1, "target": 3, "type": "parent" },{ "source": 2, "target": 3, "type": "parent" },{ "source": 1, "target": 5, "type": "parent" },{ "source": 2, "target": 5, "type": "parent" },{ "source": 1, "target": 7, "type": "parent" },{ "source": 2, "target": 7, "type": "parent" },{ "source": 3, "target": 9, "type": "parent" },{ "source": 4, "target": 9, "type": "parent" },{ "source": 3, "target": 10, "type": "parent" },{ "source": 4, "target": 10, "type": "parent" },{ "source": 5, "target": 11, "type": "parent" },{ "source": 6, "target": 11, "type": "parent" },{ "source": 5, "target": 12, "type": "parent" },{ "source": 6, "target": 12, "type": "parent" },{ "source": 7, "target": 13, "type": "parent" },{ "source": 8, "target": 13, "type": "parent" },{ "source": 7, "target": 14, "type": "parent" },{ "source": 8, "target": 14, "type": "parent" },{ "source": 9, "target": 15, "type": "parent" },{ "source": 9, "target": 16, "type": "parent" },{ "source": 11, "target": 17, "type": "parent" },{ "source": 13, "target": 18, "type": "parent" }]
}

AI生成测试数据

参考腾讯元宝生成的：将明朝朱家的人物关系进行整理，并导出为上面这种json格式的文件。

生成数据如下，具体路径：data/main.json

{"nodes": [{"id": 1,"name": "朱元璋","gender": "male","generation": 1,"birth": "1328","death": "1398","occupation": "明朝开国皇帝","introduction": "","avatar": "👴"},{"id": 2,"name": "马皇后","gender": "female","generation": 1,"birth": "1332","death": "1382","occupation": "皇后","introduction": "","avatar": "👵"},{"id": 3,"name": "朱标","gender": "male","generation": 2,"birth": "1355","death": "1392","occupation": "太子","introduction": "","avatar": "👨","parents": [1,2]},{"id": 4,"name": "朱樉","gender": "male","generation": 2,"birth": "1356","death": "1395","occupation": "秦王","introduction": "","avatar": "👨","parents": [1,2]},{"id": 5,"name": "朱棡","gender": "male","generation": 2,"birth": "1358","death": "1398","occupation": "晋王","introduction": "","avatar": "👨","parents": [1,2]},{"id": 6,"name": "朱棣","gender": "male","generation": 2,"birth": "1360","death": "1424","occupation": "永乐帝","introduction": "","avatar": "👨","parents": [1,2]},{"id": 7,"name": "朱橚","gender": "male","generation": 2,"birth": "1361","death": "1425","occupation": "周王","introduction": "","avatar": "👨","parents": [1,2]},{"id": 8,"name": "朱桢","gender": "male","generation": 2,"birth": "1364","death": "1425","occupation": "楚王","introduction": "","avatar": "👨","parents": [1,2]},{"id": 9,"name": "朱允炆","gender": "male","generation": 3,"birth": "1377","death": "1402?","occupation": "建文帝","introduction": "","avatar": "👦","parents": [3]},{"id": 10,"name": "朱高炽","gender": "male","generation": 3,"birth": "1378","death": "1425","occupation": "仁宗","introduction": "","avatar": "👦","parents": [6]},{"id": 11,"name": "朱高煦","gender": "male","generation": 3,"birth": "1380","death": "1431","occupation": "汉王","introduction": "","avatar": "👦","parents": [6]},{"id": 12,"name": "朱高燧","gender": "male","generation": 3,"birth": "1383","death": "1431","occupation": "赵王","introduction": "","avatar": "👦","parents": [6]},{"id": 13,"name": "朱瞻基","gender": "male","generation": 4,"birth": "1398","death": "1435","occupation": "宣宗","introduction": "","avatar": "👨","parents": [10]},{"id": 14,"name": "朱瞻墉","gender": "male","generation": 4,"birth": "1402","death": "1439","occupation": "越王","introduction": "","avatar": "👨","parents": [10]},{"id": 15,"name": "朱瞻墡","gender": "male","generation": 4,"birth": "1406","death": "1478","occupation": "襄王","introduction": "","avatar": "👨","parents": [10]},{"id": 16,"name": "朱祁镇","gender": "male","generation": 5,"birth": "1427","death": "1464","occupation": "英宗","introduction": "","avatar": "👨","parents": [13]},{"id": 17,"name": "朱祁钰","gender": "male","generation": 5,"birth": "1428","death": "1457","occupation": "代宗","introduction": "","avatar": "👨","parents": [13]},{"id": 18,"name": "朱见深","gender": "male","generation": 6,"birth": "1447","death": "1487","occupation": "宪宗","introduction": "","avatar": "👨","parents": [16]},{"id": 19,"name": "朱见泽","gender": "male","generation": 6,"birth": "1452","death": "1506","occupation": "崇王","introduction": "","avatar": "👨","parents": [16]},{"id": 20,"name": "朱祐樘","gender": "male","generation": 7,"birth": "1460","death": "1505","occupation": "孝宗","introduction": "","avatar": "👨","parents": [18]},{"id": 21,"name": "朱祐杬","gender": "male","generation": 7,"birth": "1476","death": "1519","occupation": "兴献王","introduction": "","avatar": "👨","parents": [18]},{"id": 22,"name": "朱厚照","gender": "male","generation": 8,"birth": "1491","death": "1521","occupation": "武宗","introduction": "","avatar": "👨","parents": [20]},{"id": 23,"name": "朱厚熜","gender": "male","generation": 8,"birth": "1507","death": "1567","occupation": "世宗","introduction": "","avatar": "👨","parents": [21]},{"id": 24,"name": "朱载垕","gender": "male","generation": 9,"birth": "1537","death": "1572","occupation": "穆宗","introduction": "","avatar": "👨","parents": [23]},{"id": 25,"name": "朱翊钧","gender": "male","generation": 10,"birth": "1563","death": "1620","occupation": "神宗","introduction": "","avatar": "👨","parents": [24]},{"id": 26,"name": "朱常洛","gender": "male","generation": 11,"birth": "1582","death": "1620","occupation": "光宗","introduction": "","avatar": "👨","parents": [25]},{"id": 27,"name": "朱由校","gender": "male","generation": 12,"birth": "1605","death": "1627","occupation": "熹宗","introduction": "","avatar": "👨","parents": [26]},{"id": 28,"name": "朱由检","gender": "male","generation": 12,"birth": "1611","death": "1644","occupation": "思宗","introduction": "","avatar": "👨","parents": [26]}],"links": [{"source": 1,"target": 2,"type": "spouse"},{"source": 1,"target": 3,"type": "parent"},{"source": 2,"target": 3,"type": "parent"},{"source": 1,"target": 4,"type": "parent"},{"source": 2,"target": 4,"type": "parent"},{"source": 1,"target": 5,"type": "parent"},{"source": 2,"target": 5,"type": "parent"},{"source": 1,"target": 6,"type": "parent"},{"source": 2,"target": 6,"type": "parent"},{"source": 1,"target": 7,"type": "parent"},{"source": 2,"target": 7,"type": "parent"},{"source": 1,"target": 8,"type": "parent"},{"source": 2,"target": 8,"type": "parent"},{"source": 3,"target": 9,"type": "parent"},{"source": 6,"target": 10,"type": "parent"},{"source": 6,"target": 11,"type": "parent"},{"source": 6,"target": 12,"type": "parent"},{"source": 10,"target": 13,"type": "parent"},{"source": 10,"target": 14,"type": "parent"},{"source": 10,"target": 15,"type": "parent"},{"source": 13,"target": 16,"type": "parent"},{"source": 13,"target": 17,"type": "parent"},{"source": 16,"target": 18,"type": "parent"},{"source": 16,"target": 19,"type": "parent"},{"source": 18,"target": 20,"type": "parent"},{"source": 18,"target": 21,"type": "parent"},{"source": 20,"target": 22,"type": "parent"},{"source": 21,"target": 23,"type": "parent"},{"source": 23,"target": 24,"type": "parent"},{"source": 24,"target": 25,"type": "parent"},{"source": 25,"target": 26,"type": "parent"},{"source": 26,"target": 27,"type": "parent"},{"source": 26,"target": 28,"type": "parent"}]
}