使用 JsPlumb 绘制拓扑图的通用方法

          示例工程见：  http://download.csdn.net/detail/shuqin1984/6488513

      

        一、 实现目标

       绘制拓扑图， 实际上是个数据结构和算法的问题。 需要设计一个合适的数据结构来表达拓扑结构，设计一个算法来计算拓扑节点的位置及连接。

          

       二、  实现思想

        1.   数据结构

       首先， 从节点开始。 显然， 需要一个字段 type 表示节点类型， 一个字段 data 表示节点数据（详情）， 对于连接， 则采用一个 rel 字段， 表示有哪些节点与之关联， 相当于C 里面的指针。 为了唯一标识该节点， 还需要一个字段 key 。 通过 type-key 组合来唯一标识该节点。结合Javascript 标准的数据格式 JSON， 定下数据结构如下：

       a.  节点数据结构: node = { type: 'nodeType', key: 'nodeKey', rel: [], data: {'More Info'}} 
       b.  rel, data 可选 , type-key 唯一标识该节点, rel 不存在表示该节点为叶子节点
       c.  关联关系: rel: [node1, node2, ..., nodeN]
       d.  节点详情: 关于节点的更多信息可放置于 data 字段中        

       2.  算法

       在算法上， 要预先规划好各个节点类型如何布局以及如何连接。 连接方向很容易定： 根据起始节点及终止节点的类型组合， 可以规定不同的连接方向， 比如 <VIP, VM>的连线方向为<TopCenter, LeftCenter>, <VM,VIP> 的连线方向为 <TopCenter, BottomCenter>。 节点位置的确定是一个关键问题， 该算法的实现难易取决于拓扑数据结构的设计。 这里采用的方法是： 采用深度优先遍历， 下一个的节点位置通过<上一个节点位置, 上一个节点类型, 下一个节点类型> 确定， 如果上一个节点有多个相同类型的后继节点， 那么这多个后继节点的位置是重合的， 需要在后面进行调整。实际上， 这个节点位置的算法是比较笨拙的， 如果有更好的算法， 请告知。 

       3.  JsPlumb

       jsPlumb 有几个基本概念。 首先， 拓扑节点实际上是 DIV 区域，每个DIV 都必须有一个ID，用于唯一标识该节点。 连接拓扑节点的一个重要概念是EndPoint . EndPoint 是附着于节点上的连接线的端点， 简称“附着点”。 将附着点 attach 到指定拓扑节点上的方法如下：

          jsPlumb.addEndpoint(toId, this.sourceEndpoint, { anchor: sourceAnchor, uuid:sourceUUID });

       toId 是 拓扑节点的 DIV 区域的 ID 值， sourceEndpoint 是附着点的样式设置， 可以复用 ， sourceAnchor 是附着点位置， 共有八种，也就是四方形的八个边缘：

        - Top (also aliased as TopCenter) - TopRight - Right (also aliased as RightMiddle) -

       BottomRight -&n