antV_G6 实现仿《天眼查》 企业关系图

1,684 阅读1分钟

Relation Graph 和 antVG6 差异

g6.antv.vision/zh G6文档地址

一、最终选择使用G6原因有以下几点

1.比如初始化时每个节点之间的距离,和连线距离 Relation不支持

2.设置元素的样式比较麻烦,而G6只需要配置好常见的hover、click、等state的样式然后激活就行了

3.G6是基于Canvas实现

二、基于该组件实现了以下功能

1.拖拽移动节点

2.节点关联关系hover时线条加粗显示 且透明其他无关系节点及线

3.右键节点可以展示自定义菜单 可以绑定事件进行操作

4.页面大小改变时画布自动更新节点及布局

5.全屏化 放大缩小等topBar功能

操作栏以及全屏效果

image.png

未选中状态

image.png

选中状态

image.png

legend

image.png

github地址 github.com/1bit-monste…