[置顶] 电信网络拓扑图自动布局之总线

在前面《电信网络拓扑图自动布局》一文中，我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用法，我们今天在这边就重点介绍总线的具体实现方案。

在 HT for Web 的连线手册中，有说明可以自定义连线类型，通过 ht.Default.setEdgeType(type, func, mutual) 函数定义，我们今天要描述的总线也是通过这样的方法来实现的。

我们来简单地描述下这个方法，虽然在文档（http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html）中已经描述得很详细了，为了下面的工作能够更好的开展，我这边还是再强调下。

这个函数名是 setEdgeType，顾名思义，它是用来自定义一个 EdgeType 的，那么第一个参数 type 就是用来定义这个 EdgeType 的名称，在 Edge 的样式上设置 edge.type 属性为 type 值，就可以让这条连线使用是我们自定义的 EdgeType。

那么第二个参数呢，就是用来计算连线的走线信息的函数，这个回调函数将会传入四个参数，分别是：edge、gap、graphView、sameSourceWithFirstEdge，其中 edge 就是样式上设置 edge.type 属性为 type 值的连线对象，这个参数是最重要的，通常有这个参数就可以完成格式各样的连线了。其他参数在手册中都描述得很清楚，可以转到手册中阅读，http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html。

那这第三个参数呢，是决定连线是否影响起始或结束节点上的所有连线，这个参数解释起来比较复杂，后续有机会的话，我们再详细说明。

先来看看一个简单的例子，http://www.hightopo.com/guide/guide/plugin/edgetype/examples/example_custom.html。

上图中，可以看到节点间的连线并不是普通的直线，或者简单的折线，而是漂亮的曲线，那么这样的曲线是怎么生成的呢？既然将这个例子放到这边作为案例，那么它一定使用了自定义 EdgeType 的功能，观察图片可以发现曲线其实可以用二次方曲线来表示，所以呢，我们在 setEdgeType 函数的回调中返回的连线走向信息中，将其描述为一条二次方曲线就可以了。说得有些绕，我们来看看代码实现吧。

 

ht.Default.setEdgeType('custom', function(edge, gap, graphView, sameSourceWithFirstEdge){
    var sourcePoint = edge.getSourceAgent().getPosition(),
        targetPoint = edge.getTargetAgent().getPosition(),
        points = new ht.List();       
        points.add(sourcePoint);
        points.add({
            x: (sourcePoint.x + targetPoint.x)/2, 
            y: (sourcePoi