使用Visjs實現網絡拓撲圖

Vis 官網是http://visjs.org/

許可是Vis.js is dual licensed under both Apache 2.0 and MIT

最近需要做拓撲圖，找了幾個項目試用了一下。有幾個要求如下：

1. 能實現網絡圖

2. 單擊節點能夠隱藏或顯示下級節點

3. 能夠查找節點並聚焦到此節點

        首先想到的是d3js，效果酷炫，但是之前沒怎么用過，沒找到特別合適的示例。沒做特別深入的研究。后來看了百度echarts也有此類型的圖，叫關系圖。由於echart的api提供了setOption()方法，可以直接修改圖表屬性，看起來比較方便，但是set后圖重繪了，每個點的位置變了，對我的第二個需求影響體驗，單擊節點后圖就會刷下，下次這個節點位置就變了。最后發現了這個visjs，有個網絡圖（Network）滿足我的需求。

        vis官網：http://visjs.org/ ， 

        許可：Vis.js is dual licensed under both Apache 2.0 and MIT

        有Network，Timeline，Graph2d，Graph3d幾種類型，和DataSet數據結構。

        

　　　　　//創建dom對象和echart類似

        var container = document.getElementById('domId');

        //初始化節點和線條數據，從接口獲取后賦值

        var nodes = [];

        var edges = [];

        //然后用DataSet封裝起來

        var data = {

               nodes : new DataSet(nodes),

               edges : new DataSet(edges)

        }

        //創建network對象

        var network = new vis.Network(container, data, options);//option參照文檔

        圖表就生成了。需求1完成。官方例子：http://visjs.org/examples/network/basicUsage.html

        Network支持常見的鼠標點擊事件，單擊、雙擊、右擊。事件會返回選中的節點和線條（右鍵除外，需要用network.getNodeAt()獲取）、點擊坐標、事件對象。

        通過單擊事件得到當前node，然后再計算出需要控制顯示隱藏的節點和線。最后通過DataSet提供的update更新圖表，圖表不會像echart那樣改變節點的位置，非常好用。需求2完成。

        需求3搜索，是利用network提供的focus(nodeId,option)方法直接聚焦到搜索節點，可以在option中設置animation參數。

        注：關於echart不知道我有沒有用錯，有沒有不刷新圖表的方法，有知道的同學可以介紹下，謝謝！