拓扑图 | 易学教程

基于HTML5的网络拓扑图(1)

阅读更多关于基于HTML5的网络拓扑图(1)

什么是网络拓扑网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。 - 维基百科网络拓扑图的绘制很多人用visio绘制网络拓扑图，非常精美，但只能静态示意，也有些传统的拓扑图中间件，基于Java、flex或者Silverlight技术，能够动态显示，只是界面略显沉重，于是有人尝试纯Web技术的图形组件，其中有不少佼佼者如：mxgraph, yfiles...... 都是老外开发的产品，类库巨大，售价昂贵，技术支持是个问题，那么有没有一种轻巧、干净、国产的纯Web拓扑图组件呢？于是就有了Qunee - 开发清新、高效的图形组件 Qunee是一套基于HTML5的网络图组件，提供Web图形解决方案，借助Qunee，可以轻松完成地图，拓扑图，组织图等等，官方网站： qunee.com , 在线演示： demo.qunee.com 拓扑图典型示例以“公共事业服务中心网络拓扑图”为例，展示典型的拓扑图结构，包含了节点、连线、分组等典型元素，通过图形展示，中心网与各个分支结构之间的关系变得一目了然拓扑图中元素类型拓扑图中基本的图元要素有：节点，文字，连线，分组等，在这个示例中都得到了体现创建节点 function createNode

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

阅读更多关于快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易，例如《入门手册》的第一个小例子麻雀虽小五脏俱全： http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 该例子展示了如何构建两个节点、一条连线、以及一个 Group 的组合效果。结合《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型，以下为构建上图界面效果的模型代码部分： // init data model hello = new ht.Node(); hello.setPosition(60, 140); hello.setName('Hello'); hello.setStyle('note', 'I love HT'); hello.setStyle('note.background', '#FFA000'); dataModel.add(hello); world = new ht.Node(); world.setPosition(260, 80); world.setName('World'); world.setStyle('note', 'HT for your imagination'); world.setStyle(

HTML5拓扑图编辑器项目

阅读更多关于 HTML5拓扑图编辑器项目

拓扑图编辑器介绍项目地址： https://github.com/samsha/graph.editor 在线演示： http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器，采用 jquery 插件的形式，是 Qunee图形组件的扩展项目数据可视化是一件有趣的工作，冰冷的数据变成美观的图形，如同命令行之于Mac OS X图形界面的，传统的图形组件以图表（Chart）居多，不少优秀的开源或者商业的作品，比如d3js, echarts, highcharts，而拓扑图、流程图组件相对少一些，知名的有yfiles，本项目则基于Qunee图形组件，是Qunee的扩展项目，旨在为客户提供可供扩展的拓扑图编辑工具，提供拓扑图展示、编辑、导出、保存等功能，此外本项目也是学习HTML5开发，构建WebAPP项目的参考实例。注意：本项目内核使用Qunee for HTML5，Qunee本身是一个商业产品，默认仅限本机（localhost）使用，非商业用途可以申请免费授权，商业用途请购买相应授权，官网： qunee.com 在线演示：请访问此地址查看效果： http://demo.qunee.com/editor/ 入门示例 Hello Graph.Editor <!DOCTYPE html> <html> <head>

HTML5高性能拓扑图

阅读更多关于 HTML5高性能拓扑图

本文的话题是：性能，HTML5、JS、Qunee组件的性能和效率问题历史回顾以往提到Javascript，联想到的是缓慢的、容易出错的小东西，一种脚本语言，现在浏览器的发展，js引擎的优化，js已经今非昔比，无论在浏览器端还是服务器端，都有一席之地，结合HTML5开发企业级应用变得切合实际，以往要在浏览器中实现丰富的图形效果，通常会选择flex富客服端解决方案，也有些Web2.0时代的组件，比如Extjs，以及各种图表组件，但性能上并不理想，随着HTML5的普及，Web组件有了新的思路，抛弃老IE浏览器，了却后顾之忧，实现真正的高性能，这一点Qunee图形组件已经将Flex远远抛到脑后，实现上万图元，流畅操作静态拓扑图性能首先是常规的性能参数，拓扑图加载时间，通过对连线的简化，使用Qunee开发版本，可以两秒内渲染一万图元，而且平移缩放，节点移动，框选都非常流畅，甚至我们测试过十万数量级，五年前的老机器上测试，可以在二十多秒渲染，而且依然可以操作，导出2亿像素的超大图也没问题，详情可参看后面的视频效果 Qunee拓扑图加载时间报表动态拓扑图性能还有一种动态图的情况，通过动画或者不停的更改图元样式，或者增减操作，拓扑图频繁刷新，我们选择一个弹簧布局来测试这种场景下qunee组件的表现，结果是两千数量级时表现流畅，六千数量级时依旧可用，详情参看视频后半段