近期需要實現(xiàn)一個網(wǎng)絡(luò)拓撲圖，可拖動，添加節(jié)點，添加關(guān)聯(lián)；網(wǎng)上搜羅一下，學習一下網(wǎng)上的開源內(nèi)容，找到了這個還不錯的插件： Vis ；我看網(wǎng)上對這個的材料不是很多，特此寫一篇，希望能幫助到大家
首先上Vis文檔：https://visjs.github.io/vis-network/docs/network/index.html
Vis包含了很多內(nèi)容，本文只使用network這一部分；使用的是vue + Ts + Vis 來實現(xiàn)網(wǎng)絡(luò)拓撲；
Vis里面有幾個關(guān)鍵的方法：
image.png
第一個方法：vis.DataSet: 用來轉(zhuǎn)換成network的接受的值；
image.png
第二個就是 Vis.network ： 用于構(gòu)建網(wǎng)絡(luò)拓撲圖；第一個值是 div的實例值，第二個是要構(gòu)建拓撲的nodes和edges，第三個值是拓撲圖的一些設(shè)置，可以從文檔里看看有什么值，大多是背景顏色啊，字體顏色之類；
network的默認為可拖動，但是是具有物理性質(zhì)的，如果不想要 可以在設(shè)置里面加入 physice : { enabled : false }；
隨后 要對畫布進行事件的監(jiān)聽：
事件.png
image.png
selectNode是選擇節(jié)點，讓節(jié)點處于高亮狀態(tài)；
添加節(jié)點操作：就是調(diào)用networkDateSet.node里面的add 方法：可以自動添加，同理邊也是如此，但是要保證節(jié)點和邊的id都是唯一的；
大致是這樣：我這也是想到哪寫到哪 ，沒有啥邏輯可言 ，希望能幫上有需要的人；
附上:官網(wǎng)的demo之一 可借鑒的東西聽多 http://jsfiddle.net/api/post/library/pure/
