记：用vis实现网络拓扑

近期需要实现一个网络拓扑图，可拖动，添加节点，添加关联；网上搜罗一下，学习一下网上的开源内容，找到了这个还不错的插件： 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/