原贴地址
http://cn-arthurs.iteye.com/blog/2009345
说明:
jtopo是一个基于canvas的js拓扑图形组件.比canvasexpress容易多了.
可以方便地加点,加连线,加鼠标事件,拖曳.
号称跨浏览器,不过实际上不支持ie678,加上excanvas.js也没用,除非像canvasexpress那样使用chrome插件.
注意在IE9下,第一行的<!DOCTYPE html>必不可少
网络拓扑图DEMO
背景
在一个项目中，需要展示模型结构，模型是有层级结构的，而且底层的模型可能被上层的多个模型所引用。
如果希望在前台展示模型的依赖关系，使用Tree结构肯定是不够直观的，而且数据有一些混乱。
因此，在技术讨论的时候，提出使用网络拓扑结构展示模型及子模型的关系。特此验证。
组件工具
JTopo（http://www.jtopo.com/）
需求
1.可以显示多个节点图标和节点名称
2.可以对节点进行连线，显示递进关系
3.可以添加对节点单击、双击、右击的事件处理
截图
代码
Html代码 
- <!DOCTYPE html>
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
- <title>jTopo Demo</title>
- <linkrel="stylesheet"type="text/css"href="../css/base.css">
- <linkhref="../css/jquery.snippet.min.css"rel="stylesheet">
- <scriptsrc="../js/jquery.js"></script>
- <scripttype="text/javascript"src="js/snippet/jquery.snippet.min.js"></script>
- <scripttype="text/javascript"src="js/excanvas.js"></script>
- <scripttype="text/javascript"src="js/jtopo-min.js"></script>
- <scriptid='code'>
- $(document).ready(function(){
- var canvas =document.getElementById('canvas');
- var stage =new JTopo.Stage(canvas);
- var scene =new JTopo.Scene(stage);
- scene.setBackground('./img/bg.jpg');
- function addLink(form,to){
- var l =new JTopo.ArrowsLink(form, to);
- l.style.lineWidth =3;
- l.style.lineJoin ='round';
- scene.add(l);
- };
- var node =new JTopo.Node("总模型");
- node.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node);
- var node1 =new JTopo.Node("模型1");
- node1.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node1);
- var node2 =new JTopo.Node("模型2");
- node2.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node2);
- var node3 =new JTopo.Node("模型3");
- node3.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node3);
- var node4 =new JTopo.Node("模型4");
- node4.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node4);
- var node5 =new JTopo.Node("模型5");
- node5.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node5);
- var node6 =new JTopo.Node("模型6");
- node6.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node6);
- var node7 =new JTopo.Node("模型7");
- node7.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node7);
- var node8 =new JTopo.Node("模型8");
- node8.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node8);
- var node9 =new JTopo.Node("模型9");
- node9.setLocation(scene.width * Math.random(), scene.height * Math.random());
- scene.add(node9);
- addLink(node1,node);
- addLink(node2,node1);
- addLink(node3,node2);
- addLink(node4,node3);
- addLink(node5,node4);
- addLink(node6,node);
- addLink(node7,node6);
- addLink(node8,node7);
- addLink(node9,node8);
- addLink(node8,node5);
- stage.play(scene);
- });
- </script>
- </head>
- <body>
- <center>
- <canvaswidth="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
- </canvas>
- </center>
- </body>
- </html>
