jtopo js插件绘制网络拓扑图

一、实现的功能

1、拓扑的基本绘制

2、拓扑放射性布局

3、多级拓扑的实现

4、下级拓扑节点的隐藏与展现

5、导出拓扑图

二、效果图展示

正常展示：

节点收缩展示：

三、引入库（稍作可以直接复用）

1、引入jQuery，jquery.js

2、引入jtopo插件jtopo-0.4.8.js

3、支持IE8，excanvas.js

四、前端代码

在实现节点隐藏于展示过程中，实现方法可能不够好，问题如下：

1、而且使用全局数组（用来存储隐藏的节点），重新展示后全局数组里面的数据无法删除，因为不敢保证所有节点同时展示与收缩，因此使用的是当重新展示后，把重新展示的节点对象用对应的数字替换数组中的位置，这样保证再次隐藏的时候数组能够重新添加。有的人可能会问既然可能会第二次隐藏，那为什么要把存在数组中的对应的展示的节点对象删除呢？那是为了防止当重复再节点上添加相同的节点。（改进思路，用拓扑对象的outLinks属性作为增删的校验）

2、判断节点点击展示或隐藏的方法待改进，我采用的是数字计数法，缺陷就是一次或两次有效（改进思路，暂无）

3、js代码：

<script type="text/javascript">
    var ip = '10.0.1.254';
    var id = <%=request.getParameter("id")%>; //
    var array = new Array();
    var count = 1;
    $(document).ready(function(){
        
          $.ajax({
            type:'post',
            url:'${basePath}JtopoController/JtopoNew.do?ip='+ip+'&id='+1+"&isInter=yes",
            dataType:"json",
            async:false,
            success:function (obj){
            
                console.info(obj);
                nodes=eval(obj);
                console.info(nodes);

                 var canvas =document.getElementById('canvas');
                 //初始化画布
                var stage;
            }
        });
         initScene();    
    });
    function createCloudNode(){ //绘制核心拓扑
        var cloudNode = new JTopo.Node();
        cloudNode.setSize(39,36);
        cloudNode.setImage("jiaohuanji.png");
        cloudNode.setLocation(1000,1000);
        cloudNode.text=ip;
        cloudNode.font= "20px Consolas";
        cloudNode.fontColor = "555,555,0";
        return cloudNode;
    }
    function initScene(){//初始化场景
        stage=new JTopo.Stage(canvas);
        //显示工具栏
        //showJTopoToobar(stage);click
        scene =new JTopo.Scene(stage);
        scene.alpha=1;
        scene.backgroundColor="#C8C8C8";
         var cloudNode;
        cloudNode=createCloudNode();
        scene.add(cloudNode);
        drawTopo(nodes,cloudNode);
        scene.addEventListener("click", eventHandler);
    }
    function compare(vv){ //扫描当前点击拓扑是否在数组中
        var strV = vv.text.substring(0,vv.text.lastIndexOf("."))+".";
        var str = "";