整体布局
为了做对比,我选择了左右布局,这样的话,左侧是 3D 知识图谱,右侧是 2D 知识图谱,比上下等布局看着方便。
2D 图谱同样增加了一个控制面板,不过只增加了布局类型的切换,没有把具体的参数放上来。
操作按钮也是放了部分操作,界面上大部分的按钮操作并没有实现具体功能。
样式
节点颜色我使用了和 3D 图谱同样的节点颜色。
如果只是从截图看的话,右边2D图谱还是比较清晰的。不过我可能是操作和交互习惯了3D,在实际操作的时候信息一直是动态的 , 总觉得2D的图谱不太方便,开起来也比较费眼睛。
布局算法
由于 Antv 本身提供了很多布局算法,我都测试了一下。
不过我感觉对于知识图谱来说,还是 Force Layout 最好。
放小一点:
当只有零零散散几个节点时:
聚合节点和离散节点都比较多的时候:
使用技术
文章中的 2D 部分使用了 Antv G6 的 5.x 版本[1]来实现, 没有继续使用 D3 来进行布局。
代码都是官网拿下来的,很简单,参数也很多。不过不知道是 G6 5.x 本身的问题,还是别的原因,2D 图谱的性能很差, 切换布局页面也很卡顿,Force Layout 的动画时长也不可控。比其我用 D3 实现的性能要差的很多。
后续的话可能还是切换回 D3 的 Force Layout。
写在结尾
当我把文章上传之后,我发现了一个问题,那就是 截图里面的 2D 效果,要比 3D 好看很多,这个和实际操作的体验还是有不少差别。
引用链接
[1] Antv G6 的 5.x 版本: https://g6-next.antv.antgroup.com/

