figure-relationship-diagram

人物关系图

简介

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

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

具体功能

开发进度(优化效果)和bug

index.html：基本框架（图+搜索功能）。

index2.html：搜索功能优化。

index3.html：基本框架。

index_fixed1-示例数据.html：修复手机端适配问题，手机端添加侧边栏。

index_fixed2-真实数据.html：添加较多层级数据，bug：受限于画布大小，节点之间会层叠。

index_fixed3-优化层叠.html：修复节点层叠问题。

index_fixed4-改成水平分布.html：改成水平分布；手机端减小搜索栏大小；添加滚动条。

index_fixed4-改成水平分布-优化布局.html：调整节点之间的距离、连线长度；搜索后命中节点；手机端，搜索命中后隐藏侧边栏。

index_fixed4-改成水平分布-优化布局2.html：修复提示框位置；修复搜索命中节点，并居中；修复点击事件会移动的问题；修复重置按钮问题。

index_fixed5-各模块分开.html：拆分css，js，data；调整提示框；树形结构，添加配偶节点为第一个子节点（之前只有上下亲属关系）；优化手机端部分UI适配问题；通过URL传参数据文件，方便访问多个文件。

带参数模式：

不带参数：https://yansheng836.github.io/figure-relationship-diagram/index_fixed5-各模块分开.html

带参数：https://yansheng836.github.io/figure-relationship-diagram/index_fixed5-各模块分开.html?filename=main.json

带参数：https://yansheng836.github.io/figure-relationship-diagram/index_fixed5-各模块分开.html?filename=main-example.json

待处理问题

1. 悬浮/点击时，提示窗位置不够好。

2. 缩放后，悬浮/点击时，提示窗位置不够好。

3. 搜索后，命中不了节点。

4. 刚进页面时，设置把某个节点放中间。

5. 手机端部分UI适配问题。

可用模板

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

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

效果图（ps:具体数据准确度存疑……）

GitHub Page访问路径

参考示例：

index3.html：https://yansheng836.github.io/figure-relationship-diagram/index3.html

（以下链接内容在提交时根据脚本自动生成）

---

index.html: https://yansheng836.github.io/figure-relationship-diagram/index.html

index2.html: https://yansheng836.github.io/figure-relationship-diagram/index2.html

index3.html: https://yansheng836.github.io/figure-relationship-diagram/index3.html

index_fixed1-示例数据.html: https://yansheng836.github.io/figure-relationship-diagram/index_fixed1-示例数据.html

index_fixed2-真实数据.html: https://yansheng836.github.io/figure-relationship-diagram/index_fixed2-真实数据.html

index_fixed3-优化层叠.html: https://yansheng836.github.io/figure-relationship-diagram/index_fixed3-优化层叠.html

index_fixed4-改成水平分布-优化布局.html: https://yansheng836.github.io/figure-relationship-diagram/index_fixed4-改成水平分布-优化布局.html

index_fixed4-改成水平分布-优化布局2.html: https://yansheng836.github.io/figure-relationship-diagram/index_fixed4-改成水平分布-优化布局2.html

index_fixed4-改成水平分布.html: https://yansheng836.github.io/figure-relationship-diagram/index_fixed4-改成水平分布.html

index_fixed5-各模块分开.html: https://yansheng836.github.io/figure-relationship-diagram/index_fixed5-各模块分开.html