Vis 官网是http://visjs.org/
许可是Vis.js is dual licensed under both Apache 2.0 and MIT
最近需要做拓扑图，找了几个项目试用了一下。有几个要求如下：
能实现网络图
单击节点能够隐藏或显示下级节点
能够查找节点并聚焦到此节点
首先想到的是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数据结构。
1 //创建dom对象和echart类似 2 ?3 ????????var container = document.getElementById(‘domId‘); 4 ?5 ????????//初始化节点和线条数据，从接口获取后赋值 6 ?7 ????????var nodes = []; 8 ?9 ????????var edges = [];10 11 ????????//然后用DataSet封装起来12 13 ????????var data = {14 15 ???????????????nodes : new DataSet(nodes),16 17 ???????????????edges : new DataSet(edges)18 19 ????????}20 21 ????????//创建network对象22 23 ????????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不知道我有没有用错，有没有不刷新图表的方法，有知道的同学可以介绍下，谢谢！
使用Visjs实现网络拓扑图
原文地址：http://www.cnblogs.com/heapoutofmemory/p/7606182.html