拓扑图框架Jtopo

使用HTML5制作网络拓扑图的方式有主要有Canvas和SVG，Jtopo采用HTML5的Canvas实现，可以使用到Html5的平台(PC，手机，平板)，免费易用，适用于浏览器IE, Firefox, Safari,Chrome等

开发流程：

1.引入jtopo.js文件

<script type="text/javascript" src="js/jtopo-min.js"></script>

2.Canvas标签定义拓扑图

<canvas width="910" height="400" id="canvas"></canvas>

3.绘制拓扑图

 $(document).ready(function(){                    
            var canvas = document.getElementById('canvas');
            var stage = new JTopo.Stage(canvas);//创建舞台对象
            var scene = new JTopo.Scene(stage);  //创建场景对象  
            scene.alpha = 1;
            
            
            //加节点
            function addNode(text, color){
                var node = new JTopo.Node();
                node.setImage('./img/topo/'+ color +'.png', true);
                node.fontColor = '0,0,0';
                scene.add(node);
                
                node.mouseover(function(){
                    this.text = text;
                });
                node.mouseout(function(){
                    this.text = null;
                });
                return node;
            }
            
            
           //连线
            function addLink(nodeA, nodeZ){
                var link = new JTopo.FlexionalLink(nodeA, nodeZ);
                link.strokeColor = '204,204,204';
                link.lineWidth = 1;
                scene.add(link);
                return link;
            }
            
            var rootNode = addNode('root', 'gray');
            
            var icons = ['green', 'blue', 'red1', 'red2'];
            for(var i=0; i<icons.length; i++){
            
                var node = addNode('second_' + i, icons[i]);    
                addLink(rootNode, node);            
                if(i == 0 || i == icons.length - 1){
                    for(var j=0; j<4; j++){
                        var thirdNode = addNode('third_' + j, 'green');
                        addLink(node, thirdNode);
  
                    }
                }
            }
            
            // 树形布局
            scene.doLayout(JTopo.layout.TreeLayout('down', 30, 107));
        });