`
xhload3d
  • 浏览: 208017 次
社区版块
存档分类
最新评论

3D拓扑自动布局之Node.js篇

阅读更多

上篇将3D弹力布局的算法运行在Web Workers后台,这篇我们将进一步折腾,将算法运行到真正的后台:Node.js,事先申明Node.js篇和Web Workers篇一样,在这个应用场景下并不能提高性能,纯粹为了折腾好玩,当然也不会白玩,人生就在折腾中,只有折腾才能真正成长。


 

核心实现代码和Web Workers篇基本一致,唯一区别在于前后台交互的方式上,worker通过postMessage和addEventListener('message' 就可以发送和接收消息,对于真正分离前后台的Node.js自然没那么简单了,我采用了Socket.io通信框架,Socket.io让长连接通信变得无比简单,和Web Workers的通信几乎一样的容易了,Socket.io的用法下图一目了然:


 

Node.js后台代码如下,通过require引入HT和Socket.io相关类库,io = require('socket.io').listen(8036)构建出一个监听在8036端口的服务,通过io.sockets.on('connection'等着客户端页面来建立的socket通信,通过socket.on('moveMap',监听客户端发过来的图片节点拖拽变化信息进行同步,通过 socket.emit('result', result);发送自动布局算法的运算结果push到客户端。

 

io = require('socket.io').listen(8036);
ht = require('ht.js').ht;
require("ht-forcelayout.js");
reloadModel = require("util.js").reloadModel;    

io.sockets.on('connection', function (socket) {    
    var dataModel = new ht.DataModel(),
        forceLayout = new ht.layout.Force3dLayout(dataModel);

    forceLayout.onRelaxed = function(){    
        var result = {};
        dataModel.each(function(data){
           if(data instanceof ht.Node){
               result[data._id] = data.p3();
           } 
        });
        socket.emit('result', result);
    };
    forceLayout.start();

    socket.on('moveMap', function (moveMap) {
        dataModel.sm().cs();
        for(var id in moveMap){
            var data = dataModel.getDataById(id);
            if(data){
                data.p3(moveMap[id]);
                dataModel.sm().as(data);
            }
        }     
    });
    socket.on('reload', function (data) {
        reloadModel(dataModel, data);   
    });           
});

 客户端的代码需要通过引入Socket.io客户端类库,通过socket = io.connect('http://localhost:8036/')链接服务器获得握手链接socket对象,剩下的代码就是同socket.emit发送客户端拖拽信息,以及socket.on监听服务器推送过来的自动布局结果:

            g3d.mi(function(evt){
                if(evt.kind === 'betweenMove'){                
                    moveMap = {};
                    g3d.sm().each(function(data){
                        if(data instanceof ht.Node){
                            moveMap[data._id] = data.p3();
                        }
                    });
                    socket.emit('moveMap', moveMap);                
                }
            }); 

            socket = io.connect('http://localhost:8036/');                              
            socket.on('result', function (result) {
                for(var id in result){
                    var data = dataModel.getDataById([id]);
                    if(data && !g3d.isSelected(data)){
                        data.p3(result[id]);
                    }                
                } 
            });

 

几个注意点:

 

1、首选和Web Workers一样,跑在Node.js的类库肯定不能操作window和document之类的页面特定元素对象,从这点说很多考虑不周全的类库会把自己限制死只能在页面主线程运行,这点HT for Web考虑得很周到,不仅ht.js包括所有ht-forcelayout.js插件都是可运在Web Workers和Node.js的非GUI环境,因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储。

 

2、Util.js定义的reloadModel函数我增加了this.reloadModel = reloadModel;的逻辑,这样才能在Node.js后台代码reloadModel = require("util.js").reloadModel; 这样的方式得到该函数进行调用,细节可以参考 http://nodejs.org/api/modules.html 的章节

 

3、这个例子是有缺陷的,以下视频播放过程你会发现,我打开了两个页面,这样就会有两个socket分别连接后台Node.js,而Node.js默认是单线程的,如果正在一个请求函数密集运算处理,则其他请求只能排队等待处理,这也是视频中我拖拽一个页面布局是,另一个页面无法操作的原因。当然你可以改进demo,采用http://nodejs.org/api/cluster.html的cluster方式,实现真正的后台多核任务处理

操作视频如下: http://v.youku.com/v_show/id_XNjc1MjY2ODE2.html

  • 大小: 795.5 KB
  • 大小: 210.6 KB
分享到:
评论

相关推荐

    echartst拓扑图数据传输图.rar

    你可以参考这篇文章,结合提供的代码,进一步学习和理解 ECharts 拓扑图的用法。 总的来说,"echartst拓扑图数据传输图.rar" 提供了一个实践 ECharts 拓扑图的实例,涵盖了数据结构、图形配置和交互功能等方面,是...

    D3.js实现拓扑图的示例代码

    D3.js(Data-Driven Documents)是一个强大的JavaScript库,允许开发者直接操作DOM(Document Object Model)来绑定数据并创建动态、交互式的图表。 首先,拓扑图的实现涉及到以下几个关键步骤: 1. **引入D3.js库...

    原生JS实现径向树布局算法

    对于更复杂的情况,你可能需要借助像D3.js这样的可视化库,它们提供了丰富的功能和便捷的API来处理各种图形布局问题。 总之,径向树布局算法是将树状数据以辐射状展现的有效方法。通过原生JavaScript实现,你可以...

    Gojs设备拓扑图Demo实例(设备,端口均可点击)

    4. **布局算法**:GoJS内置了多种布局算法,如树形布局、环形布局、网格布局等,可以帮助自动调整节点的位置,使得拓扑图更加整洁美观。在这个实例中,可能使用了适合设备和端口关系的特定布局。 5. **动画效果**:...

    【JavaScript源代码】vue 动态生成拓扑图的示例.docx

    这些文件包括了 Bootstrap 的样式库,用于基础的布局和样式,以及 bkTopology.js,这是一个专门用于绘制拓扑图的库。例如: ```html <link href="https://magicbox.bk.tencent....

    jtopo官网源码(API+demo)

    - **布局算法**:Jtopo内置了几种布局算法,如`scene.layoutForce()`的力引导布局,可自动调整节点位置。 - **事件处理**:`node.on('mousedown', function(e){...})` 注册事件监听器,如鼠标按下、移动、释放等。 ...

    Raphael拓扑图

    7. **布局算法**:拓扑图中的节点通常需要自动布局,以避免重叠和美观。这需要一些自定义的算法,如力导向布局、树状布局等。可以结合其他库(如d3.js)或自行编写算法实现。 8. **缩放和平移**:为了适应不同大小...

    jsgraph,纯javascript脚本画图,实现web拓扑图

    **jsgraph:纯JavaScript绘制Web拓扑图** jsgraph是一个基于纯JavaScript的图形库,它允许开发者在网页上创建和展示各种复杂的图表和拓扑结构。这个库的主要优点是其跨浏览器兼容性,支持大部分现代浏览器,使得它...

    d3js-v4中文文档.pdf

    D3.js是一种流行的JavaScript库,用于数据可视化。D3的最新版本v4在API文档、功能和架构上均有重大更新。下面详细说明这些知识点。 首先,D3.js v4版本中文API文档与前一版本v3有明显差异,其中包括了对Canvas的...

    d3.js实现简单的网络拓扑图实例代码

    3. 初始化力导向布局(force layout):d3.js的力导向布局是用于创建网络拓扑图的强大工具。它模拟节点间的相互作用力,包括引力、斥力和摩擦力,使节点自动布局。 ```javascript var force = d3.layout.force() ....

    jtopo-npm 安装包

    **npm (Node Package Manager)** 是JavaScript生态系统中的包管理器,用于安装、管理和分发Node.js项目依赖。`jtopo_npm` 压缩包则是将jtopo库封装为一个npm模块,方便开发者在Node.js环境中使用。 **主要知识点:*...

    Graphviz.js:Grapviz 的 javascript 端口

    Graphviz 是一个开源的图形渲染引擎,主要用于自动布局和绘制图表,如流程图、网络拓扑图和组织结构图等。它使用一种特定的语言(DOT语言)来描述图形结构,然后自动生成美观且易于理解的图表。 尽管 Graphviz.js ...

    JsPlumb网络拓扑图流程图

    JsPlumb是一个强大的JavaScript库,专门用于创建交互式的网络拓扑图和流程图。它支持jQuery和原生JavaScript两种方式,使得开发者能够轻松地在网页上构建可视化的关系连接。JsPlumb库的核心功能在于绘制连接线,将...

    jtopo.rar (jtopo拓扑图两节点双线连接bug修复)

    jtopo是一款基于JavaScript的开源拓扑图库,适用于Web应用中创建动态、交互式的网络拓扑图。在本案例中,"jtopo.rar"是一个修复了特定问题的版本,特别是关于"两节点双线连接bug修复"的问题。 首先,我们要理解在...

    jTopo 的拓扑结构图画法示例

    它提供了丰富的图形元素和交互功能,能够帮助开发者轻松构建出各种复杂的网络拓扑布局,如数据中心、服务器集群、网络设备配置等。在"jTopo 的拓扑结构图画法示例"中,我们可以通过提供的 test1.html 和 test2.html ...

    jtopo拓扑练习

    6. **布局算法**:`jtopo`提供了几种内置的自动布局算法,如力导向布局、环形布局等,可以帮助优化拓扑图的视觉效果。根据具体需求,我们可以选择合适的布局方式,或者自定义布局算法。 7. **数据绑定**:为了实现...

    javascript矢量图

    本文将深入探讨JavaScript矢量图的实现、相关技术以及如何使用VivaGraph.js库来创建拓扑图。 首先,让我们理解SVG和Canvas。SVG是W3C推荐的一种XML标记语言,用于描述二维图形。它可以包含形状、路径、文本、图像等...

    jtopo-encapsulation_jtopo_

    它的名字来源于“Java Topology”,但实际使用中并不局限于Java环境,而是可以在任何支持JavaScript的平台上运行,如Web浏览器或Node.js环境。 在“树型绘制,利用jtopo实现拓扑图的绘制(共4级树)”这一项目中,...

    mxgraph.zip

    mxGraph是一款强大的JavaScript库,专用于创建交互式图形应用程序,如流程图、拓扑图和其他可视化图表。在本文中,我们将深入探讨mxgraph.js的核心功能、Node API的使用以及如何结合XML文件进行数据解析和图形展示。...

Global site tag (gtag.js) - Google Analytics