转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么。今天是春节后上班的第三天,给大家分享一下我们前段时间的一个需求,需求是这样的:界面中的网元分为不同的域,比如一级域,二级域,三级域,….N级域,而且不同域之间会有连线。对于这个需求,按照常规的想法,使用group岂不是很简单,一级域是一个group,二级域也是一个group,二级域的group是一级域的父亲,以此类推。但是这样有个问题,如果域比较多,会造成group的过度嵌套,界面中group多了之后,不仅用户体验下降,而且会严重影响性能,所以倒不如直接用树,可以很直观的体现各个域之间的层级关系。
下面是布局的代码,代码很简单,相信熟悉twaver的人很容易看懂。
function layoutRing(){ //setup all group rings. var groups={}; box.forEach(function(data){ if(data instanceof twaver.Node){ var node=data; node.setClient('x', node.getLocation().x); node.setClient('y', node.getLocation().y); var groupName=data.getClient('group'); if(!groups[groupName]){ groups[groupName]=[]; } var rings=groups[groupName]; var level=parseInt(node.getClient('level')); if(rings.length<=level){ rings.push([]); } var ring=rings[level]; ring.push(node); } }); cleanConnections(); layouter.doLayout('topbottom'); for(var groupName in groups){ //get this group bounds. var x1=undefined, y1=undefined, x2=undefined, y2=undefined; var rings=groups[groupName]; for(var level=0;level<rings.length; level++){ var ring=rings[level]; for(var index=0;index<ring.length;index++){ var node=ring[index]; x1=x1 ? Math.min(x1, node.getLocation().x) : node.getLocation().x; y1=y1 ? Math.min(y1, node.getLocation().y) : node.getLocation().y; x2=x2 ? Math.max(x2, node.getLocation().x) : node.getLocation().x; y2=y2 ? Math.max(y2, node.getLocation().y) : node.getLocation().y; var target=box.getDatas().get(Math.floor(Math.random()*box.size())); if(target instanceof twaver.Node && target!==node){ var connection=new twaver.Link(node, target); connection.setStyle('link.width',0.2); connection.setStyle('link.color', '#aaaaaa'); connection.setClient('connection',true); connection.setClient('angle', (target.getClient('angle')+node.getClient('angle'))/2); box.add(connection); } } } var width=x2-x1; var height=y2-y1; //layout each ring for this group. for(var level=0;level<rings.length; level++){ var ring=rings[level]; for(var index=0;index<ring.length;index++){ var node=ring[index]; var radius=node.getLocation().y-y1; var range=Math.PI*2; var angle=(node.getLocation().x-x1)/width * range; if(level>1 && (level==rings.length-1 || rings.length<4)){ angle=node.getParent().getClient('angle')+(angle-node.getParent().getClient('angle'))/3; } var x=radius*Math.cos(angle); var y=radius*Math.sin(angle); node.setLocation(node.getClient('x'),node.getClient('y')); node.setClient('angle', angle); move(node, x, y); } } } }
布局中的可以加入动画效果,提升用户体验,关于动画的相关文档可以参考文档:
function move(node, x, y){ var x0=node.getClient('x'); var y0=node.getClient('y'); new twaver.Animate({ from: { x: x0, y: y0 }, to: { x: x, y: y }, type: 'point', delay: 100, dur: 1000, easing: 'easeNone', onUpdate: function (value) { node.setLocation(value.x, value.y); } }).play(); }
如果有对这个示例感兴趣的朋友,可以发邮件索取相关代码,邮箱地址:jack.shangguan@servasoft.com
相关推荐
《TWaver HTML5 开发指南代码》是一份专为开发者准备的参考资料,它主要聚焦于如何利用TWaver库在HTML5环境下构建拓扑工具和机房展示应用。TWaver是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的...
通过这些文件,开发者可以学习如何在HTML5环境中集成Twaver,创建交互式的可视化界面,包括添加图形元素、处理用户交互、响应事件、定制样式和布局等。同时,了解API文档可以帮助开发者掌握如何利用Twaver提供的类和...
TWaver HTML5是一套基于HTML5的图形组件库,它提供了一整套用于构建网络拓扑图、树形结构、表格和图表等功能丰富的组件,广泛用于网络监控、网络管理、数据可视化和分析等场景。开发指南详细介绍了TWaver HTML5的...
Twaver学习案例的例子
TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...
4. **3D图形组件**:TWaver提供的3D图形组件包括但不限于3D图表(如3D柱状图、3D饼图)、3D网络图、3D空间布局等,可用于数据可视化和复杂的场景模拟。 5. **基本代码示例**:压缩包中的"twaver"文件可能包含一个或...
”这说明提供的示例不仅包含核心的twaver.js库,还有与之配合的HTML文件“alarm.html”。Jetty是一个轻量级的Java Web服务器和Servlet容器,能够方便地运行Web应用程序。这意味着用户可以直接在Jetty环境下运行这个...
【标题】"twaver拓扑" 是一个基于HTML5技术的图形化工具,主要用于创建和展示复杂的网络拓扑结构。这个工具提供了丰富的图形类型,能够适应多种应用场景,如IT网络架构、工业控制系统、流程图等。它允许用户通过图形...
- **TWebTree**:用于展示树形结构的数据,如网络设备的层级关系等。 - **TWebPropertySheet**:用于展示设备或节点的属性信息。 - **TWebElementTable**:提供表格形式的数据展示,便于查看和管理大量的数据信息。 ...
- 自定义布局:研究如何使用Twaver的布局算法或自定义布局策略来排列图形元素。 总之,这个"Twaver Web实例源码"是一个宝贵的学习资源,帮助开发者深入理解如何利用这两个强大工具进行Web可视化开发。通过实际操作...
- **其他组件**:除了拓扑图组件之外,TWaver还提供了多种传统组件,如树组件、表格、树表格、属性页以及图表(饼图、线图、柱状图等)等。 #### 三、TWaver数据模型 TWaver不仅仅是一系列可视化的组件集合,其背后...
TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。 使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的...
TWaver组件家族包括TWaver Java、TWaver Web、TWaver Flex、TWaver .NET、TWaver HTML5和TWaver GIS,覆盖了多种开发环境。本文主要讨论的是在Flex环境下的TWaver组件——TWaver Flex。 在配置TWaver Flex的开发...
- **界面交互**也是TWaver的重要组成部分之一,它提供了丰富的API来处理用户的输入事件,并且可以根据用户的操作实时更新视图。 ### 产品家族与技术栈 - TWaver支持多种技术和平台,包括**Java**、**Flex**、**...
TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...
2. 设备布局:TWaver支持自动布局算法,可以智能地排列和连接设备,减少手动调整的工作量。 3. 交互性:用户可以通过鼠标或触摸屏进行交互,例如拖动设备、选择设备查看详细信息等。 4. 数据绑定:每个设备都可绑定...
TWaver Java提供了多种图形组件,包括但不限于网络、树形、表格、树表、属性表单、列表和图表组件,以及一个数据管理框架,用于处理和展示各种数据结构。这些组件和框架共同构成了TWaver的核心功能,使开发者能够...
5. `javadoc`:这个目录下是TWaver库的Java文档,详细解释了每个类、接口和方法的功能和用法,对开发者理解和使用TWaver的API非常有帮助。 6. `src`:源代码目录,可能包含了示例代码或者TWaver的部分源码,供...