计算机网络的拓扑结构是指在拓扑中研究与大小、形状无关的点和线之间关系的方法。网络中的计算机和通信设备被抽象为一个点，传输介质被抽象为一条线。由点和线组成的几何图形就是计算机网络的拓扑结构。网络的拓扑结构反映了网络中各个实体的结构关系。它是构建计算机网络的第一步，是实现各种网络协议的基础。它对网络性能、系统可靠性和通信成本有重大影响。计算机网络中的拓扑是指连接各个节点的形式和方法；将网络中的工作站、服务器等网络单元抽象为“点”；网络中的电缆被抽象为“线”。影响网络性能、系统可靠性和通信成本。拓扑结构也分为：总线拓扑结构、星形拓扑结构、环形拓扑结构、树形拓扑结构和网状拓扑结构。本文写的案例是总线拓扑中的一个分支，我们将一步步构建这个拓扑图。示例图：拓扑图组件ht.graph.GraphView（以下简称GarphView）是HT框架中二维功能最丰富的组件，其相关类库均在ht.graph包下。GarphView具有基本的图形展示和编辑功能、拓扑节点连接和自动布局功能、电力、电信等行业的预定义对象、动画渲染等特效。可以作为通用的图形化编辑工具使用，也可以扩展到工作流、组织结构图等企业应用。HT框架的组件是指可视化和交互视图控件。HT框架基于HTML5技术，因此HT组件的可视化部分本质上是一个HTML元素。大多数HT组件都绑定到DataModel数据模型。用户可以操作纯js语言驱动可视化组件，屏蔽了HTML底层图形技术的复杂性。HT对HTML5技术进行封装的目的是为了提高开发效率和可维护性，但并不代表不允许用户直接操作HTML原生元素。有HTML5开发经验的程序员可以在了解HT系统机制的前提下使用。各种HTML5技术对HT组件进行自定义扩展。我们使用ht.graph.GraphView组件作为场景，具体代码只有两行：graphView=newht.graph.GraphView();graphView.addToDOM();先声明变量，然后将组件实例变量添加到body中。所有HT组件的根层都是一个div组件，可以通过组件的getView()函数获取。默认和自定义的交互事件监听器一般都加在这个div上（getView().addEventListener(type,func,false)），渲染层一般由canvas提供。用户可以直接在根div和canvas层设置css背景等样式，或者在根div层添加新的HTML组件，作为canvas的兄弟组件一起呈现。HT组件一般使用绝对定位，position设置为absolute。HT组件一般嵌入在BorderPane、SplitView、TabView等容器中，而最外层的HT组件需要用户手动将getView()返回的底层div元素添加到页面的DOM元素中。这里需要注意的是，当父容器的尺寸变化时，如果父容器是BorderPane、SplitView等HT预定义的容器组件，HT容器会自动递归调用子组件的invalidate函数通知更新.但是如果父容器是原生的html元素，HT组件无法知道它需要更新，所以最外层的HT组件一般需要监听窗口的窗口大小变化事件，调用最外层组件的invalidate函数更新。为了方便加载最外层组件填充窗口，HT的所有组件都有addToDOM函数，其实现逻辑如下，其中iv是invalidate的简写：addToDOM=function(){varself=this,view=self.getView(),//获取底层divstyle=view.style;document.body.appendChild(视图);//将组件底层div添加到body中style.left='0';//将ht组件的默认位置设置为absolute绝对定位style.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);接下来，我们将介绍“数据容器”的概念。顾名思义，就是一个加载数据的容器。数据容器ht.DataModel（以下简称DataModel）作为承载Data数据的模型，管理Data数据的增删改查和事件分发。,HT框架的所有组件通过绑定DataModel以不同的形式呈现给用户界面，数据容器可以通过view.getDataModel()（简称view.dm()）获取；同时，组件也会监听DataModel模型的变化事件（view.getSelectionModel()，简称view.sm()）实时同步更新界面数据信息。掌握了DataModel的操作，也就掌握了所有组件的模型驱动方式。我们要创建两个节点ht.Node（继承自ht.Data类），一个服务器，一个客户端，两个中间连接和一个自循环连接。这些都是Data数据，需要添加到容器中的DataModel数据中。但是我们必须先创建这个数据节点。使用HT将节点添加到数据容器中只需要两句话。该方法与上面创建拓扑组件的方法非常相似。将拓扑组件添加到主体中，将节点添加到数据容器中：varserver=newht.Node();//创建“服务器”数据节点graphView.dm().add(server);//将节点添加到数据容器中graphView.dm()Client端同样创建，节点名称为client。为了美观，我在服务端和客户端节点都设置了图片。设置图片有两种方式：直接将图片的相对或绝对路径设置到数据模型的对应属性，server.setImage('images/server.png')首先通过ht.Default.setImage('server','images/server.png'),然后将注册名称设置为模型。Server.setImage('server')直接设置路径，方便开发，不需要提前注册Images，但是图片路径在数据模型序列化时占用内存大，不利于管理和维护将来图像路径发生变化后。两种方法都可以正确使用，可以根据项目情况选择或混合使用不同的方法。如果使用url的path方法，HT内部会自动加载图片，onload后会自动更新对应的视图组件。在HT的框架下，图片被赋予了更广泛的意义。HT提供了自定义JSON格式的矢量描述形式。也可以作为HT标准定义的JSON矢量格式的图片注册使用。HT的矢量方法比传统图片更方便。格式更节省空间，缩放不失真。最强大的特点是矢量图的所有图形参数都可以动态绑定到Data模型上的数据上。有关详细信息，请参阅矢量手册。我这里的解释还没到这一步，有兴趣的可以自行学习。接下来是在两个节点之间创建连接。ht.Edge类型用于连接start和target两个Node节点。两个节点之间可以有多个Edge，也允许start和target是同一个节点。同一个节点的情况就是形成自环的情况~这里有3个连接。由于有两个类似的，我就只贴出直线连接和自环连接的代码进行说明：varedge=newht。Edge(server,client);//创建连接节点，参数为起始节点和目标节点graphView.dm().add(edge);//将连接节点添加到数据容器中varcirEdge=newht.Edge(server,server);//本次连接的起始节点和目标节点为同一个节点，形成自循环graphView.dm().add(cirEdge);连接节点也是继承自Data类，所以add进入数据容器的方式是一样的。至于线上的字，是通过setStyle方法实现的。HT数据Data分为三种属性类型：get/set或is/set类型，如getName(0/setName('ht')和isExpanded()，用于普通属性操作attr类型，通过getAttr(name)和setAttr(key,value)访问，该类型是HT保留给用户存储业务数据的样式类型，通过getStyle(name)和setStyle(key,value)进行操作，GraphView上图元的样式由这个控制type属性这里我通过style类型添加了文字说明，通过'label'属性设置显示的文字：edge.s({//setStyleshorthand'label':'request',//设置文字'label.position':3//设置文字位置});最终显示文字由GraphView.getLabel函数决定：getLabel:function(data){varlabel=data.getStyle('label');//获取值样式中label属性的stylereturnlabel===undefined?data.getName():label;}上面还有一个文字位置，就是HT包的位置，具体显示位置如下：17是中心位置。大家可以根据这个位置进行调整，看看效果。具体说明请参考HTforWeb位置手册。至此，所有的代码都分析完了。在下一节中，我将介绍如何在连接中添加流。记得收看哦~
