layui 树状图默认全部展开_基于 HTML5 Canvas 绘制的电信网络拓扑图

电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式。组合逻辑描述网路功能的体系结构，配置形式描述网路单元的邻接关系，即以交换中心(或节点)和传输链路所组成的拓扑结构。常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等，本文的例子主要描绘的是总线型拓扑，在显示上相对其他的结构类型来说更清晰明了，绘制起来也非常容易。

虽然题目起的名字是电信网络拓扑图，几乎所有的拓扑图都能涵盖，例如基本网络图，网络拓扑图，机架图，网络通信图，3D网络图等等。

效果图如下：

这个图看起来挺简单的，代码也少，但是内容不少。

首先，机柜01、机柜02、机柜03 都是 ht.Group “组”类型，ht.Group 类型用于作为父容器包含孩子图元，在 GraphView 拓扑图(http://www.hightopo.com)上可通过双击进行展开合并，合并时会自定隐藏子孙图元节点， 如果有子节点有连线连接到外部时，合并的 Group 将代理进行连接。Group 的移动会带动孩子节点跟随， 孩子的位置和大小变化也会影响 Group 的展开图形和 position 位置。

这边提到一个代理连线的问题，“代理”两个字可以很好地表明代理连线意义。实际上就是如果