首先上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/
注： 这些设置只是针对单个节点或着边；全局所有点或者节点设置需要使用visNodes 或 visEdges。
在node data.frame上添加更多变量。有关可用选项，请参阅visNodes()参数。
示例：
在edges data.frame上添加更多变量。有关可用选项，请参阅visEdges()参数。
示例：
你也可以选择节点的id/标签与一个列表与nodesIdSelection:
使用selectedBy选项通过列的值选择一些节点:
vis.js 提出了一些导航工具:
Itroduction to visNetwork
visNetwork
系列文章：
R语言进行网络分析的基础包 igraph
networkD3 绘制动态网络
http://www.duoduoxuexi.com/visp.html 这是套VIS设计的视频教程，你可以去看下 VIS设计包含的内容很多这是他们教程详细的目录： 1前言 2标志设计前的联想 3标志具体设计 4标志的颜色选择 5企业全称的由来 6字体设计 7字体间距编排 8标志和标志反白稿和标志行间距整理 9主色辅助色及色阶 10色彩搭配表制作与色彩搭配 11企业标准字及方格坐标制图等 12企业标准字行间距规划 13印刷字体规范 14辅助图形的设计 15名片设计 16工作证设计 17信封信纸的设计 18传真纸的设计 19便签纸的设计 20纸杯设计 21文件夹设计 22公文袋设计 23手提袋设计 24门牌设计 25玻璃门和电梯门设计 26形象墙设计 27广告牌设计 28企业旗帜设计 29徽章设计 30钥匙扣设计 31领带设计 32服装设计 33打火机设计 34车体广告 35太阳伞设计 36指示系统设计 37塑料薄膜设计 38封面封底设计 39VI页眉设计 40基础部分文案 41应用部分文案 42目录设计 43应用部分效果图嵌入 44封面效果图合成麻烦采纳，谢谢!
