使用Visjs实现网络拓扑图

标签：不刷新   col   刷新   []   anim   animation   方法   完成   eid   

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数据结构。

 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实现网络拓扑图

标签：不刷新   col   刷新   []   anim   animation   方法   完成   eid   

原文地址：http://www.cnblogs.com/heapoutofmemory/p/7606182.html