HTML5网络拓扑图应用实例讲解

本文主要介绍了详解快速开发基于 HTML5 网络拓扑图应用的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

dm = new ht.DataModel();//数据容器
gv = new ht.graph.GraphView(dm);//拓扑组件 参数为dm 绑定的数据模型
gv.addToDOM();//将拓扑图添加进body体中 

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //获取组件底层 p
        style = view.style; 
    document.body.appendChild(view);//将底层 p 添加进 body 体中           
    style.left = '0';//HT 一般将组件都设置为 absolute 的绝对定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //事件监听窗口大小变化，iv 为延时刷新组件         
} 

var server = new ht.Node();
server.setName('server');//设置节点名称，显示在节点下方
server.setImage('serverImage');//设置节点图片
server.setSize(20, 60);//设置节点大小
dm.add(server);//将节点添加进数据容器dm中
server.setPosition(100, 100);//设置节点坐标(x, y)

var group = new ht.Group();//组，组中可以有多个节点
group.setImage('groupImage');//设置图片
dm.add(group);
var client = new ht.Node();//这个节点是添加进组中的
client.setName('client');
client.setImage('clientImage');
dm.add(client);
group.addChild(client);//组添加孩子
group.setExpanded(true);//设置组为展开模式
client.setPosition(200, 100);//设置节点位置 如果组中只有一个节点，那么这个节点的位置可以为组的位置 

var edge = new ht.Edge(server, client);
dm.add(edge); 

edge.s({//节点设置样式属性
    'edge.dash': true,//显示虚线
    'edge.dash.flow': true,//开启虚线流动
    'edge.dash.color': 'yellow',//虚线颜色
    'edge.dash.pattern': [8, 8],//虚线样式
    'label': 'flow',//节点注释
    'label.background': 'pink',//节点注释背景颜色        
}); 

group.s({
    'group.background': 'rgba(255, 255, 0, 0.1)',//设置组的背景颜色
    'note': "Double click me!",//标注 显示的内容
    'note.position': 13,//标注位置
    'note.offset.y': 10,//标注位置y轴偏移
}); 

我们可以通过 note.position 来改变标注的位置（具体位置信息请参考HT for Web 位置手册 ），也可以使用 note.offset.x 和 note.offset.y 来改变标注的位置。

全部代码解析完毕！我会尽快更新，如果大家觉得进度慢的话，可以自己去我们官网（ HT for Web ）上学习，希望大家能有更多的收获，学习是自己的事情，快动手实践将这片文章的内容变成你自己的知识吧！
相关推荐：

有向图之任务调度拓扑图介绍

详解HTML5网络拓扑图整合OpenLayers实现GIS地图应用（图）

HTML5网络拓扑图性能优化的图文详解

以上就是HTML5 网络拓扑图应用实例讲解的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于HTML5网络拓扑图应用实例讲解的详细内容...