近期需要实现一个网络拓扑图，可拖动，添加节点，添加关联；网上搜罗一下，学习一下网上的开源内容，找到了这个还不错的插件： Vis ；我看网上对这个的材料不是很多，特此写一篇，希望能帮助到大家
首先上Vis文档：https://visjs.github.io/vis-network/docs/network/index.html
Vis包含了很多内容，本文只使用network这一部分；使用的是vue + Ts + Vis 来实现网络拓扑；
Vis里面有几个关键的方法：
image.png
第一个方法：vis.DataSet: 用来转换成network的接受的值；
image.png
第二个就是 Vis.network ： 用于构建网络拓扑图；第一个值是 div的实例值，第二个是要构建拓扑的nodes和edges，第三个值是拓扑图的一些设置，可以从文档里看看有什么值，大多是背景颜色啊，字体颜色之类；
network的默认为可拖动，但是是具有物理性质的，如果不想要 可以在设置里面加入 physice : { enabled : false }；
随后 要对画布进行事件的监听：
事件.png
image.png
selectNode是选择节点，让节点处于高亮状态；
添加节点操作：就是调用networkDateSet.node里面的add 方法：可以自动添加，同理边也是如此，但是要保证节点和边的id都是唯一的；
大致是这样：我这也是想到哪写到哪 ，没有啥逻辑可言 ，希望能帮上有需要的人；
附上:官网的demo之一 可借鉴的东西听多 http://jsfiddle.net/api/post/library/pure/
网友评论