近期需要實現(xiàn)一個網(wǎng)絡(luò)拓?fù)鋱D瞬雹，可拖動昧谊，添加節(jié)點，添加關(guān)聯(lián)酗捌；網(wǎng)上搜羅一下拣挪，學(xué)習(xí)一下網(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ò)拓?fù)洌?br> Vis里面有幾個關(guān)鍵的方法：
image.png
第一個方法：vis.DataSet: 用來轉(zhuǎn)換成network的接受的值稍刀；
image.png
第二個就是 Vis.network ： 用于構(gòu)建網(wǎng)絡(luò)拓?fù)鋱D；第一個值是 div的實例值敞曹，第二個是要構(gòu)建拓?fù)涞膎odes和edges账月，第三個值是拓?fù)鋱D的一些設(shè)置，可以從文檔里看看有什么值澳迫，大多是背景顏色啊局齿，字體顏色之類；
network的默認(rèn)為可拖動橄登，但是是具有物理性質(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/
