`

TWaver HTML5之树形布局

阅读更多

转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么。今天是春节后上班的第三天,给大家分享一下我们前段时间的一个需求,需求是这样的:界面中的网元分为不同的域,比如一级域,二级域,三级域,….N级域,而且不同域之间会有连线。对于这个需求,按照常规的想法,使用group岂不是很简单,一级域是一个group,二级域也是一个group,二级域的group是一级域的父亲,以此类推。但是这样有个问题,如果域比较多,会造成group的过度嵌套,界面中group多了之后,不仅用户体验下降,而且会严重影响性能,所以倒不如直接用树,可以很直观的体现各个域之间的层级关系。
Screen Shot 2015-02-27 at 10.14.31
下面是布局的代码,代码很简单,相信熟悉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);
        }
      }
    }   
   }

 

布局中的可以加入动画效果,提升用户体验,关于动画的相关文档可以参考文档:Screen Shot 2015-02-27 at 10.53.11

 

 

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是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    通过这些文件,开发者可以学习如何在HTML5环境中集成Twaver,创建交互式的可视化界面,包括添加图形元素、处理用户交互、响应事件、定制样式和布局等。同时,了解API文档可以帮助开发者掌握如何利用Twaver提供的类和...

    TWaver HTML5 Developer Guide

    TWaver HTML5是一套基于HTML5的图形组件库,它提供了一整套用于构建网络拓扑图、树形结构、表格和图表等功能丰富的组件,广泛用于网络监控、网络管理、数据可视化和分析等场景。开发指南详细介绍了TWaver HTML5的...

    Twaver-html5.zip

    Twaver学习案例的例子

    TWaver for HTML5

    TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...

    TWaver的3d图形组件库,小demo

    4. **3D图形组件**:TWaver提供的3D图形组件包括但不限于3D图表(如3D柱状图、3D饼图)、3D网络图、3D空间布局等,可用于数据可视化和复杂的场景模拟。 5. **基本代码示例**:压缩包中的"twaver"文件可能包含一个或...

    twaver.js使用示例

    ”这说明提供的示例不仅包含核心的twaver.js库,还有与之配合的HTML文件“alarm.html”。Jetty是一个轻量级的Java Web服务器和Servlet容器,能够方便地运行Web应用程序。这意味着用户可以直接在Jetty环境下运行这个...

    twaver拓扑

    【标题】"twaver拓扑" 是一个基于HTML5技术的图形化工具,主要用于创建和展示复杂的网络拓扑结构。这个工具提供了丰富的图形类型,能够适应多种应用场景,如IT网络架构、工业控制系统、流程图等。它允许用户通过图形...

    Twaver Web SVG 开发说明文档

    - **TWebTree**:用于展示树形结构的数据,如网络设备的层级关系等。 - **TWebPropertySheet**:用于展示设备或节点的属性信息。 - **TWebElementTable**:提供表格形式的数据展示,便于查看和管理大量的数据信息。 ...

    twaver web实例源码

    - 自定义布局:研究如何使用Twaver的布局算法或自定义布局策略来排列图形元素。 总之,这个"Twaver Web实例源码"是一个宝贵的学习资源,帮助开发者深入理解如何利用这两个强大工具进行Web可视化开发。通过实际操作...

    TWaver图形界面之道

    - **其他组件**:除了拓扑图组件之外,TWaver还提供了多种传统组件,如树组件、表格、树表格、属性页以及图表(饼图、线图、柱状图等)等。 #### 三、TWaver数据模型 TWaver不仅仅是一系列可视化的组件集合,其背后...

    TWaver“一站式”UI组件提供包括网络拓扑图、地图、设备面板图、流程图、各种Chart图表、树图、表格等各种通用组件

    TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。 使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的...

    flex Twaver组件使用

    TWaver组件家族包括TWaver Java、TWaver Web、TWaver Flex、TWaver .NET、TWaver HTML5和TWaver GIS,覆盖了多种开发环境。本文主要讨论的是在Flex环境下的TWaver组件——TWaver Flex。 在配置TWaver Flex的开发...

    twaver-flex中文用户手册

    6. **布局算法**:讨论内置的各种自动布局算法,如力导向布局、树状布局、环形布局等,以及如何自定义布局策略。 7. **事件处理**:说明如何监听和响应图形元素及图表的事件,实现复杂的用户交互逻辑。 8. **动画...

    TWaver文档

    - **界面交互**也是TWaver的重要组成部分之一,它提供了丰富的API来处理用户的输入事件,并且可以根据用户的操作实时更新视图。 ### 产品家族与技术栈 - TWaver支持多种技术和平台,包括**Java**、**Flex**、**...

    Twaver_chinese_document

    TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...

    基于TWaver实现的3D机房Demo

    2. 设备布局:TWaver支持自动布局算法,可以智能地排列和连接设备,减少手动调整的工作量。 3. 交互性:用户可以通过鼠标或触摸屏进行交互,例如拖动设备、选择设备查看详细信息等。 4. 数据绑定:每个设备都可绑定...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    TWaver Java 3.7 Developer Guide

    TWaver Java提供了多种图形组件,包括但不限于网络、树形、表格、树表、属性表单、列表和图表组件,以及一个数据管理框架,用于处理和展示各种数据结构。这些组件和框架共同构成了TWaver的核心功能,使开发者能够...

Global site tag (gtag.js) - Google Analytics