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

前言

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

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

效果:
基于relation-graph实现的关系图谱_第1张图片
基于relation-graph实现的关系图谱_第2张图片
基于relation-graph实现的关系图谱_第3张图片
基于relation-graph实现的关系图谱_第4张图片

在图谱中有一个根节点,在这里我做了隐藏。看起来像是可以有多个根节点的效果,所谓新增主节点就是添加二级节点(一级节点和与一级节点的关系被隐藏)

你可能感兴趣的:(javascript,开发语言,vue.js,前端框架)