背景
在一个项目中，需要展示模型结构，模型是有层级结构的，而且底层的模型可能被上层的多个模型所引用。
如果希望在前台展示模型的依赖关系，使用Tree结构肯定是不够直观的，而且数据有一些混乱。
因此，在技术讨论的时候，提出使用网络拓扑结构展示模型及子模型的关系。特此验证。
组件工具
JTopo（http://www.jtopo.com/）
需求
1.可以显示多个节点图标和节点名称
2.可以对节点进行连线，显示递进关系
3.可以添加对节点单击、双击、右击的事件处理
截图
代码
<!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>
相关推荐
用asp.net mvc和 echart4 构建的一个网络拓扑图的demo,可以动态显示网速,并通过访问交换机和防火墙的snmp信息,获取端口实时网速,前台用echarts来显示动态拓扑图,后台通过sharpSnmp组件定时更新端口流量信息
适合人群：需要在网页上绘制简单的网络拓扑图或类似的拓扑图、流程图，均可参考该demo。 使用建议：该demo是作者在根据JTopo官网上的开发文档和demo，结合自己项目中需要用到的功能所做，并没有覆盖该js库的所有功能...
本demo利用jTopo技术，巧妙地将网络中的计算机等设备连接起来形成拓扑图。拓扑图给出网络服务器、工作站的网络配置和相互间的连接，非常试用于想要展示网络物理结构的项目使用
网络拓扑 ravis，flex,组织结构图，地图。适合初学着。。
WPF c# 拓扑图 网络部署图源码, 左边拖拽到右边 进行连线,做了个小demo 代码百分百可以用的 ~ ~ 没有visio 那么强大 但是足够学习了,用cavas 画的
C#使用FlowChart画网络拓扑结构图，完整代码，VS2008工程，可编译和测试。demo给出了一个简单的以太网络结构（有多个交换机和N多的电脑），图中的各设备都可以移动、放大或者缩小，禁用了FlowChart默认的创建box和...
主要介绍了vue 集成 vis-network 实现网络拓扑图的方法，本文通过实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
刚接触画拓扑图时没法下手,看个demo吧,让你时半功倍! 使用说明与源代码都在附件里,你也可以到js官网去下载demo,如果不想再找,送点分我,嘎嘎!
birdeye是基于flex的拓扑图，该压缩包包含swc和使用demo
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3...大家可以在官网的Demo中看看它的功能。
pb12.6 datawindow中的极品(计划表、K线图、约会、均衡器、网络拓扑图、计划监视 甘特图Demo)
前言 ...我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框，对传入的...从上面的效果图中我们可以看到，整个页面分为 3 个部分，左边的 graphView 拓扑图部分，右下角的 tableView 表格部分，以及右上角的 proper
BlogJava上不少朋友是做网管系统的。一个典型的网络管理系统，需要具备FCAPS几个标准模块，而网络的自动发现和...如果喜欢研究代码，可以看看相关SNMP、多线程和拓扑图展示的部分，虽然很简单，就当看肥皂剧消遣了。
下载导入flex开发环境，即可使用。flex4 mysql dom4j
自己做的jtopo-demo，图片还有jq.js以及jtopo.js可自行下载，里面有官网的右键菜单，树形布局，告警，节点名字，节点连线颜色等各个功能
ANTV X6拖拽流程。可自定义节点、设备，设计设备或节点的属性。 可自定义流程任何方向，可动态扩展。 后期开发可自定义任何功能。 参考官网DEMO地址：...本作品是结合官网DEMO做了扩展功能，可保存数据和导入数据。
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的... 部分字体以及插图等来自网络，若是侵权请联系删除。
Flow Char Design Demo 用于开发asp.net svg 相关资料
jgraphx用于开发流程图.网络拓扑图等的开源包，内附源代码和demo实例
Qunee for HTML5（以下简称Qunee）是一套基于HTML5技术的图形组件产品，使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的...