电信网络结构是指电信网络各网络单元按照技术要求和经济原则组合配置的组合逻辑和配置形式。组合逻辑描述了网络功能的架构，配置形式描述了网络单元的邻接关系，即交换中心（或节点）和传输链路组成的拓扑结构。常见的网络拓扑有星型结构、总线结构、环型结构、树型结构、网状结构、混合型拓扑和蜂窝型拓扑。本文中的例子主要描述总线拓扑结构。结构类型更清晰，更容易绘制。虽然题目名称是电信网络拓扑图，但是几乎所有的拓扑图都可以涵盖，比如基础网络图、网络拓扑图、机架图、网络通信图、3D网络图等。效果图如下:这个图看起来很简单，代码也少，但是内容很多。首先，cabinet01、cabinet02、cabinet03都是ht.Group“分组”类型。ht.Group类型用作包含子图元的父容器。在GraphView拓扑图（http://www.hightopo.com）上可以双击展开和合并。合并时，子孙原始节点将被隐藏。如果有子节点连接到外部，则合并后的Group将通过代理连接。Group的移动会带动子节点跟随，子节点的位置和大小变化也会影响Group展开的图形和位置。这是有关代理连接的问题。“proxy”这个词可以很好的说明代理连接的意思。实际上，如果组内的节点和组外的节点之间存在连接，那么在组合并时，组会“代理”外部节点的连接，这就是代理连接。我们以02柜为例。在02号柜里面，有一个“电脑”和“内网交换机”的两个连接，所以当我们双击02号柜进行合并时，其实就相当于02号柜和“内网交换机”。开关之间有两根电线。那么，我们来看看如何绘制这个组以及组内的节点，首先创建“cabinet02”的Group节点，因为我在整个例子中创建了三个Group节点，创建方法类似，所以group的创建代码封装复用：functioncreateGroup(name,x,y){vargroup=newht.Group();//group类型其实是一个节点group.setExpanded(true);//设置theexpandedgroupgroup.setName(name);//设置分组名称group.s({//设置分组样式style'group.title.background':'rgba(14,36,117,0.80)',//组展开后的标题背景色,只对组为空的类型有效.type'group.background':'rgba(14,36,117,0.40)',//组展开后的背景色'group.title.align':'center'//group展开后标题文字的水平对齐方式，默认为'left'，可设置居中和居右});group.setPosition(x,y);//设置组的位置group.setImage('images/server.json');//设置拓扑图上显示的图片信息。GraphView拓扑图中，一般以位置为中心绘制图片dataModel.add(group);//将创建的group节点添加到数据容器返回group;}group可以通过双击展开合并.展开的时候会显示一个带有标题栏的框（当然这些都是可以自定义的）。合并时，会显示上面代码中设置的group.setImage中的图片。柜子里面的所有节点都是ht.Node类型的节点，所以我也封装了它：functioncreateNode(image,parent,x,y){varnode=newht.Node();//创建一个Node节点if(image)node.setImage(image);//设置节点的显示图像if(parent)node.setParent(parent);//设置节点的父节点if(x&&y)node.setPosition(x,y);//设置节点的位置dataModel.add(node);//将节点添加到数据容器返回节点;}生成cabinet02:cabinet=createGroup('cabinet02',146,445);//创建cabinet02createNode('images/normal.json',cabinet,78,440).s('label','数据监控分析系统');//创建一个带有“普通”图片的节点，并设置其文字本节点为“数据监控分析系统”，因为连接需要“源节点”和“终端节点”。这里的源节点就是中间的“内网交换机”。我们再创建这个节点：varline=createNode();//创建节点line.setSize(725,20);//设置节点大小line.setPosition(310,325);//设置节点位置线。s({//设置节点的style属性'shape':'roundRect',//判断shape的形状，默认为空，表示用图像绘制。roundRect周围的圆角矩形'shape.background':'rgba(14,36,117,0.80)',//背景填充颜色，如果为null则表示无背景填充'shape.border.color':'#979797',//边框color'shape.corner.radius':10,//该参数指定roundRect类型的圆角半径，默认为空，系统自动调整，可设置正值'label':'内网切换',//文字内容，默认Empty'label.position':45,//文字内容，默认为空'label.offset.x':50,//文字的水平偏移量，对于Edge来说，表示'label2'沿连接方向的水平偏移量:'Internalnetworkswitch',//HT除了label.*属性外，默认还提供了label2.*属性，用于满足图形元素需要显示的情况双文本'label2.position':48,'label2.offset.x':50,'label2.offset.y':2,});不知道大家有没有注意到有一个label2的style属性，这个是HT给一个节点添加两个label文本至于添加的功能，label属性和label2属性是完全一样的，只要你设置属性时使用label和label2来区分。源节点和端节点都可用，可以连接：createEdge(line,createNode('images/computer.json',cabinet,185,450),'rgb(30,232,178)',-100,true);//参数1为源节点，参数2为结束节点，参数3为连线的颜色，参数4为连线起点的水平偏移量，参数5为是否创建两个连线.还有点意思，“切换”部分，最左边的蓝色方块节点和中间的长节点不是一体的，而是分开的，不过我是用setHost在节点之间进行吸附，然后反向吸附,所以操作相当于两个节点合二为一：varexchange=createNode('images/exchange.json',null,-53,313);exchange.setHost(line);//设置吸附line.setHost(exchange);//反吸附，设置lineAdsorbed为exchange，因为HT会按照节点加入数据容器的先后顺序来排列hierarchy。我的switch是在添加线路之后，所以默认的switch节点会显示在线路下面。我们将显示默认级别关闭，并设置开关交换显示在数据容器的顶部：dataModel.setAutoAdjustIndex(false);//关闭自动调整容器中数据索引顺序的开关da??taModel.sendToTop(exchange);//将数据放在拓扑代码之上解释就到此为止。有不懂的可以留言或者私信我，大家一起讨论。
