背景
在一个项目中，需要展示模型结构，模型是有层级结构的，而且底层的模型可能被上层的多个模型所引用。
如果希望在前台展示模型的依赖关系，使用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组件定时更新端口流量信息
总的来说，Gojs设备拓扑图Demo实例展示了GoJS的强大功能，为网络设备的管理和监控提供了一种直观且交互性强的解决方案。通过学习和应用这个实例，开发者可以掌握GoJS在构建复杂图形界面时的关键技术和实践方法。
WPF c# 拓扑图 网络部署图源码, 左边拖拽到右边 进行连线,做了个小demo 代码百分百可以用的 ~ ~ 没有visio 那么强大 但是足够学习了,用cavas 画的
Ravis是一个专门用于创建和展示网络拓扑图的开源工具。它利用Flex技术，这是一种基于ActionScript的富互联网应用程序（RIA）开发框架，能够为用户提供丰富的图形界面和交互体验。Ravis的设计目标是简化网络拓扑的...
适合人群：需要在网页上绘制简单的网络拓扑图或类似的拓扑图、流程图，均可参考该demo。 使用建议：该demo是作者在根据JTopo官网上的开发文档和demo，结合自己项目中需要用到的功能所做，并没有覆盖该js库的所有功能...
**jsPlumb绘制拓扑图Demo** jsPlumb是一个JavaScript库，专为在网页上创建可视化连接或关系图而设计。这个"jsPlumb绘制拓扑图Demo"提供了一个简单的起点，适合那些想要学习如何使用jsPlumb来构建拓扑图和流程图的...
这个"vis拓扑图demo"是使用vis.js库创建的一个示例，它展示了如何利用该库构建具有动态和立体效果的拓扑图表。拓扑图常用于表示网络、系统或流程中的组件以及它们之间的关系，这种可视化方式有助于理解复杂的系统...
**jTopo.js实现网络拓扑图...通过阅读和分析"demo"中的代码，你可以了解如何将jTopo.js应用到实际项目中，创建出具有专业水准的网络拓扑图。此外，结合文档和社区资源，可以进一步提升你的开发技能，实现更多高级功能。
在IT行业中，网络拓扑图是一种直观展示网络设备和连接关系的图形表示，它有助于理解和管理复杂的网络结构。本文将详细探讨如何利用Vue.js框架来实现网络拓扑图中的动态线条效果。 Vue.js是一个轻量级、高性能的前端...
在这个"echart拓扑图单节点拖拽互不影响demo"中，`index.vue`文件很可能是包含了ECharts实例创建、事件监听和数据管理的Vue组件代码。具体实现细节，例如如何配置ECharts选项，如何处理拖拽事件，以及如何与后端交互...
3. **js网络拓扑关系图绘制**：在网络管理和监控领域，网络拓扑图是非常重要的工具，它能够清晰地展示网络设备、服务器、线路之间的连接关系。这个插件允许开发者动态地构建和展示复杂的网络结构。这包括自定义节点...
学习这个demo，你可以了解如何使用Java或JavaScript来构建一个网络拓扑图，包括如何定义节点、边和布局，如何实现动态更新，以及如何处理用户交互。此外，你还能掌握如何整合和使用外部库，以及如何组织项目文件结构...
在本文中，我们将深入探讨如何使用D3.js库来创建拓扑图，这是一个常用于数据可视化，特别是网络架构...通过学习和理解这些基础，开发者可以创建出既美观又实用的网络拓扑图，用于展示复杂的系统关系或应用程序调用链。
C#使用FlowChart画网络拓扑结构图，完整代码，VS2008工程，可编译和测试。demo给出了一个简单的以太网络结构（有多个交换机和N多的电脑），图中的各设备都可以移动、放大或者缩小，禁用了FlowChart默认的创建box和...
8. **网络通信**：如果项目需要实时获取或更新机房数据，可能需要与后端服务器进行通信，使用Ajax或其他API请求技术。 9. **用户界面**：构建简洁易用的2D界面，如控制面板，允许用户调整视图参数、选择显示内容等...
总的来说，这个压缩包提供的工具或示例代码可以帮助IT专业人员更好地理解和实践SNMP在局域网内的应用，尤其是在网络管理和监控方面，通过自动化发现和绘制拓扑图，提升网络运维的效率和准确性。对于学习网络管理和...
首先，我们需要引入d3.js库和相关的拓扑图插件，如d3拓扑图或d3网络图等。这些插件提供了预定义的图形元素和交互行为，简化了开发过程。 在创建拓扑图时，我们需要定义以下几个关键组成部分： 1. **数据模型**：...
JTOPO是一款强大的前端拓扑图绘制库，它专为构建网络、系统和业务流程的可视化解决方案而设计。这个DEMO是完全基于前端实现的，不依赖任何后端服务，而是使用模拟数据来展示其功能。这使得开发者可以快速地将它集成...
而vis-network是一个基于Web的可视化库，专为创建网络拓扑图而设计。这种图形化表示非常适用于表示网络中节点间的关系，例如社交网络、网络结构、交易关系等。 在本文中，我们将会介绍如何在Vue项目中集成vis-...
这里创建了一个带有 `.bktopo-container` 类的 `div`，并在其中包含一个 `.bktopo_demo` 类的 `div`，这个 `div` 将作为拓扑图的画布。此外，还有一个用于节点模板的 `div`，这样可以自定义节点的显示样式： ```...