网络拓扑图DEMO

背景

在一个项目中,需要展示模型结构,模型是有层级结构的,而且底层的模型可能被上层的多个模型所引用。

如果希望在前台展示模型的依赖关系,使用Tree结构肯定是不够直观的,而且数据有一些混乱。

因此,在技术讨论的时候,提出使用网络拓扑结构展示模型及子模型的关系。特此验证。

 

组件工具

JTopo(http://www.jtopo.com/)

 

需求

1.可以显示多个节点图标和节点名称

2.可以对节点进行连线,显示递进关系

3.可以添加对节点单击、双击、右击的事件处理

 

截图


网络拓扑图DEMO_第1张图片
 

代码

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>jTopo Demo</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="../js/jquery.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	<script type="text/javascript" src="js/excanvas.js"></script>
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	
	<script id='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>
        <canvas width="800" height="500" id="canvas" style=" background-color:#EEEEEE; border:1px solid #444;">
    
        </canvas>
   </center>
  </body>
</html>

 

你可能感兴趣的:(demo)