记：用vis实现网络拓扑

JavaScript021

记：用vis实现网络拓扑,第1张

近期需要实现一个网络拓扑图，可拖动，添加节点，添加关联；网上搜罗一下，学习一下网上的开源内容，找到了这个还不错的插件： Vis ；我看网上对这个的材料不是很多，特此写一篇，希望能帮助到大家

首先上Vis文档： https://visjs.github.io/vis-network/docs/network/index.html

Vis包含了很多内容，本文只使用network这一部分；使用的是vue + Ts + Vis 来实现网络拓扑；

Vis里面有几个关键的方法：

第一个方法：vis.DataSet: 用来转换成network的接受的值；

随后 要对画布进行事件的监听：

selectNode是选择节点，让节点处于高亮状态；

添加节点操作：就是调用networkDateSet.node里面的add 方法：可以自动添加，同理边也是如此，但是要保证节点和边的id都是唯一的；

大致是这样：我这也是想到哪写到哪 ，没有啥逻辑可言 ，希望能帮上有需要的人；

附上:官网的demo之一 可借鉴的东西听多 http://jsfiddle.net/api/post/library/pure/

vuevis拓扑图鼠标悬停提示解决办法：

1、首先使用HBuilderX创建一个vue-vis项项目，一个空白项目

2、在data中声明一个参数message，填写内容“页面加载于”加当前时间

3、v-bind：title鼠标移上的显示赋值为data声明的参数message，这里的参数名在引号内书写

4、最后展现效果，鼠标悬停几秒钟此处会有提示信息