基于relation-graph实现的关系图谱

前言

近期由于工作需要，需要在项目里实现关系图谱的效果。就先做了一个demo，主要是使用了relation-graph的一个图谱工具。是一个偏向于前端的项目，所有的节点和关系的构建使用前端的数组和对象进行的操作，使用的vue2框架！在项目里实现了图谱节点和关系的增删改查以及保存样式布局的操作。为了方便大家使用我把它放到了gitee上，希望能够帮助到更多的人。

relation-graph图谱工具参考地址： http://relation-graph.com/  
前端项目地址：git clone https://gitee.com/gitee-zhangqing/graph_relation.git
后端项目地址：git clone https://gitee.com/gitee-zhangqing/graph-boot.git

效果：




最新版本修改：

在图谱中有一个根节点，在这里我做了隐藏。看起来像是可以有多个根节点的效果，所谓新增主节点就是添加二级节点（一级节点和与一级节点的关系被隐藏），如果不需要此效果可以在代码中去除隐藏，删除掉新增主节点的按钮和功能。