使用 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 - Bottom (also aliased as BottomCenter) -BottomLeft - Left (also aliased as LeftMiddle) - TopLeft

sourceUUID 是拓扑节点与附着位置的结合， 也就是说， 要将一个 附着点附着到拓扑节点为 toId 的 sourceAnchor 指定的位置上。 每个拓扑节点都可以定义多个源附着点和目标附着点。 源附着点是连接线的起始端， 目标附着点是连接线的终止端。

两个 uuid 即可定义一条连接线：

jsPlumb.connect({uuids:[startPoint, endPoint], editable: false});

startPoint 和 endPoint 分别是连接线的起始端 Endpoint uuid 和 终止段 Endpoint uuid. 它定义了从起始拓扑节点的指定附着点连接到终止拓扑节点的指定附着点。

三、 实现代码

drawTopo.js 提供绘制拓扑图的基本方法， 只要按照指定格式将数据结构扔进去， 就可以自动绘制出拓扑图来。

         五、 小结
         这里看到，  数据结构/算法与实际应用的一个很好的结合。 所以说， 绝不要忽视数据结构和算法的作用， 实际上， 只要仔细去发现， 去挖掘， 就会发现其大有用武之地。