首先，还是从场景的搭建开始，这个界面是在 body 体上添加了三个部分：3d 组件，表单组件以及拓扑组件（2d 组件）。添加的方式是这样的：为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其实现逻辑如下，其中 iv 是 invalidate 的简写：

 

　　HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的HT组件则需要用户手工将 getView（）返回的底层 div 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件，则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。

 

　　因为这个函数是将 style 中的位置都固定了，所以不能将所有的组件都用这个函数，我们按照这个函数的方式将拓扑组件和属性组件添加进界面中，3d 组件直接利用 addToDOM 函数即可：

 

　　拓扑组件和属性组件的样式我就不再赘述了，只是设置了一个背景颜色以及 left right top bottom 位置而已。这里要声明一下，HT 组件一般都以设置 position 为 absolute 的绝对定位方式。

 

　　大家可能会好奇，这个鹰眼怎么生成的？在 HT 中，只要 2D 和 3D 共用同一个数据容器 dataModel 即可共同拥有所有在这个 dataModel 中的元素，并且位置都是对应的，只需要类似这种做法即可：

 

　　是不是非常简单……可以省去大把时间开发……

 

　　这个例子中除了连线之外的所有元素都是 ht.Node 类型的节点，所以我们将这个节点的创建方法封装一下，好重复利用：

 

　　以及连线的创建：

 

　　我们界面中的显示的连线都是虚线流动的，HT 默认是关闭虚线流动的功能的，通过下面这句来开启虚线流动的功能：

 

　　同时我们还需要设置动画，控制时间间隔，使得连线虚线偏移，形成一种“流动”的状态，动画请参考 schedule 调度手册：

 

　　以下是界面上出现的所有的服务器以及客户端的节点的声明，都是基于 createNode 和 createEdge 函数创建的：

 

　　最后，在 form 表单中操作“连线” edge 的流动、流动方向、流动步进、连线颜色以及虚线颜色。我们在 form 表单中将这些需要操作的属性添加进去，总共 5 个属性，包括我通过 setAttr（简写为 a）自定义的属性 flow.direction、flow.step 和样式属性 edge.color 以及 edge.dash.color 还有就是直接操作动画的开关 enabled 属性来控制连线的流动。我们通过 name 属性结合 accessType 属性实现对 Data 节点的存取：