jTopo官网：http://www.jtopo.com/

1、特点：

基于HTML5 Canvas，不依赖其他库

2、应用：

效果：

源码github地址

在HTML页面中引入jtopo.min.js文件，添加一个canvas：

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>绘制拓扑图</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta name="description" content="">

     <meta name="keywords" content="">

     <meta name="author" content="">

     <link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">

     <link rel="stylesheet" type="text/css" href="css/base.css">

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

     <script type="text/javascript" src="js/toolbar.js"></script>

     <link href="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet">

     <!--[if lt IE 9]>

     <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

     <![endif]-->

   </head>

   <body>

     <ul id="contextmenu" style="display: none;">

       <li><a>顺时针旋转</a></li>

       <li><a>逆时针旋转</a></li>

       <li><a>放大</a></li>

       <li><a>缩小</a></li>

       <li><a>节点详情</a></li>

       <li><a>编辑节点</a></li>

       <li><a>删除该节点</a></li>

     </ul>

     <ul id="linemenu" style="display: none;">

       <li><a>删除该连线</a></li>

     </ul>

     <ul id="detail" style="display:none;background-color :#d3d3d3;"></ul>

     <div class="container">

       <div id="content">

         <div class="row clearfix">

           <div class="span2">

             <div class="coms" id="components">

               <div class="component" title="exchanger" trigger="manual">

                 <a class=" icon exchanger"></a>

               </div>

               <div class="component" title="server" trigger="manual">

                 <a class=" icon server"></a>

               </div>

               <div class="component" title="subnetwork" trigger="manual">

                 <a class=" icon subnetwork"></a>

               </div>

               <div class="component" title="node" trigger="manual">

                 <a class=" icon node"></a>

               </div>

               <div class="linkline" title="greenline" trigger="manual">

                 <span class=" line greenline" id='1'></span>

               </div>

               <div class="linkline" title="orangeline" trigger="manual">

                 <span class=" line orangeline" id='2'></span>

               </div>

               <div class="linkline" title="redline" trigger="manual">

                 <span class=" line redline" id='3'></span>

               </div>

             </div>

           </div>

           <div class="span10">

             <canvas width="850" height="400" id="target"></canvas>  

           </div>

         </div> <!-- row -->

       </div> <!-- /content -->

     </div> <!-- /container -->

     <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

     <script src="http://cdn.bootcss.com/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>

     <script src="js/com.js"></script>

   </body>

 </html>

根据自身需求，控制节点、连线等的样式；

给节点、连线添加右键菜单；

可以通过添加鼠标事件实现拖拽组件绘制拓扑图；

节点、连线、右键菜单、拓扑图的数据可用json格式在前后端传递。

网络拓扑图js插件——jTopo应用的更多相关文章

  1. JS绘制拓扑图示例 （JTopo）

    目前在做的项目是渔政的监控,需要用到的设备包括雷达,光电,站点信息等,想要更直观的展现设备之间的连接关系和状态信息,这时候需要画一张拓扑图 在做拓扑图之前,首先要学习一下,html里面另一个比较常用的 ...

  2. python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)

    Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外 ...

  3. visjs使用小记-1.创建一个简单的网络拓扑图

    1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head> <title> ...

  4. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  5. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  6. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  7. 矢量Chart图表嵌入HTML5网络拓扑图的应用

    使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...

  8. 玩转JS插件系列

    说明:本系列文章只是通过学习JS插件源码来巩固自己的JS知识,不涉及任何商业目的,如有侵犯版权请尽快告知 一.UI 背景 对话框和灯箱 筛选及排序 反馈 弹出层 悬停 布局 图表 加载 圆边 滚动 标 ...

  9. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

随机推荐

  1. userAgent判断客户端，以及各个浏览器的ua

    userAgent判断客户端,以及各个浏览器的ua http://blog.csdn.net/yoyoosyy/article/details/70142884 navigator.userAgent ...

  2. 轻松学习Linux之本地安装系统

    1.安装Linux前的准备工作(详细讲解了系统分区,及类型) 2.轻松学习Linux之用光驱安装 3.轻松学习Linux之用光驱安装(之二) 4.硬盘安装Linux系统 本文出自 "李晨光原 ...

  3. 【习题 7-6 UVA - 12113】Overlapping Squares

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出来一个正方形. 然后每次枚举新加的正方形左上角的坐标就可以. 注意覆盖的规则,控制一下就可以. 然后暴力判断是否相同. 暴 ...

  4. POJ 2253-Frogger （Prim）

    题目链接:Frogger 题意:两仅仅青蛙,A和B,A想到B哪里去,可是A得弹跳有限制,所以不能直接到B,可是有其它的石头作为过渡点,能够通过他们到达B,问A到B的全部路径中.它弹跳最大的跨度的最小值 ...

  5. Jquery获取select选中的option的文本信息

    注意:以下用的$(this)代表当前选中的select框 第一种: $(this).children("option:selec... ...查看全文

  6. phoenixframe自己主动化平台在Linux环境下运行用例的说明

    phoenixframe自己主动化平台支持在Linux环境下使用phantomjs,Firefox.chrome运行測试用例.但有下面几个问题须要注意: 1.若无法启动phantomjs,Firefo ...

  7. 关于程序中delay函数带来的繁琐问题

    导致“滴滴”声音不准确的原因是因为,串口屏幕发送信息的时候会有delay() 的延迟. 得到的教训就是,无论在什么地方,最好都不要加delay的延迟.否则含有delay的子 函数加入到其他模块中,就会 ...

  8. spring使用context:property-placeholder载不进属性问题 wangbiglei 发表于1年前 原 spring使用context:property-placeholder载不进属性问题

    https://my.oschina.net/wangbiglei/blog/489583 http://www.cnblogs.com/leftthen/p/5615066.html

  9. 【COGS1672】【SPOJ375】QTREE

    这是我的第一个边权链剖 COGS上和SPOJ有点不一样就是没有多组数据了本质还是一样的 我写的是COGS那个事实上改一改就能够去SPOJ AC了= -= (但是我如今上不去SPOJ卧槽(╯‵□′)╯︵ ...

  10. 【原创】基于pyautogui进行自动化测试

    前期准备: python3.6 pyautogui pywinauto 以下代码实现内容: 1.打开记事本 2.记事本中输入This is a test 3.保存内容 4.退出进程 import py ...