记：用vis实现网络拓扑

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

visnetwork中node有了x，y后拖动不了可以按esc退出当前模式。该模式下不支持文件拖动，退出该模式，拖动文件后再进入就可以刘。vis-network是vis.js可视化库中的一个组件，主要用于网络可视化需求，支持自定义形状、样式、颜色、大小、图像等。

注： 这些设置只是针对单个节点或着边；全局所有点或者节点设置需要使用visNodes 或 visEdges。

在node data.frame上添加更多变量。有关可用选项，请参阅visNodes()参数。

示例：

在edges data.frame上添加更多变量。有关可用选项，请参阅visEdges()参数。

示例：

你也可以选择节点的id/标签与一个列表与nodesIdSelection:

使用selectedBy选项通过列的值选择一些节点:

vis.js 提出了一些导航工具:

Itroduction to visNetwork

visNetwork

系列文章：

R语言进行网络分析的基础包 igraph

networkD3 绘制动态网络

---