用拓扑图呈现多层级关系图（二）

上一篇里我们用TWaver制作了一个公司内部的流程图，这一弹，我们来研究如何呈现出公司内部门和员工间的关系网图。先来看看效果：


例子中我们展示的是各部门员工之间的复杂关系图。在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。好了，我们就来分析一下这张图如何用twaver实现它。

首先我们要定义部门的网元，twaver矢量减少了我们很多定制UI的繁琐，我们直接用矢量来描述这个小圆点部分，注意小圆点的颜色需要区分鼠标滑过时的效果，这里我们定义了是否需要高亮的属性：highlighted，代码如下：

twaver.Util.registerImage('circle_node', {
	w: 200,
	h: 200,
	lineWidth:1,
	lineColor: 'bl