今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用，HT 内部封装了一个拓扑图形组件 ht.graph.GraphView（以下简称 GraphView）是 HT 框架中 2D 功能最丰富的组件，其相关类库都在 ht.graph 包下。GraphView 具有基本图形的呈现和编辑功能，拓扑节点连线及自动布局功能，电力和电信等行业预定义对象，具有动画渲染等特效，因此其应用面很广泛，可作为监控领域的绘图工具和人机界面，可作为一般性的图形化编辑工具，可扩展成工作流和组织图等企业应用。简单说来就是：拓扑图是泛化的说法，电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等，简单说就是节点连线构成的这些都是这里指的拓扑图。
用 HT 开发一个网络拓扑图是非常容易的一件事，只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图：
这个例子非常基础，几乎完成了服务器与客户端在拓扑上的所有功能。话不多说，猜猜看这个例子包括 HTML 标签的所有部分总共花了多少行代码？减去空行也就 50 行，我还做了很多样式部分的设计，毕竟给大家看的例子不能太丑嘛~
大家可以在 tuputu_jb51.rar 自行下载代码，注意因为有 json 文件，会存在图片跨域问题，需要用 Firefox 或者本地服务器跑起来。
我们在最开始就说明一下，HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案， 其包含通用组件、拓扑组件和 3D 渲染引擎等丰富的图形界面开发类库，用户只需要引入 ht.js 即可，而且跟别的任何东西完全不冲突，因为 HT 只是声明了一个全局变量 ht，仅此而已。
接下来解析代码部分，首先，搭建拓扑图场景：
| dm = new ht.DataModel();//数据容器 gv = new ht.graph.GraphView(dm);//拓扑组件 参数为dm 绑定的数据模型 gv.addToDOM();//将拓扑图添加进body体中 |
HT 的所有组件的根部都是一个 div，通过 getView() 方法获取，我们在 addToDOM 方法中就用到了这个方法：
| addToDOM = function(){ var self = this, view = self.getView(), //获取组件底层 div style = view.style; document.body.appendChild(view);//将底层 div 添加进 body 体中 style.left = '0';//HT 一般将组件都设置为 absolute 的绝对定位 style.right = '0'; style.top = '0'; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //事件监听窗口大小变化，iv 为延时刷新组件 } |
然后向拓扑场景中添加“服务器”以及“客户端”节点：
