轉自：http://www.it165.net/pro/html/201311/7616.html

使用JsPlumb繪制拓撲圖的通用方法

一、 實現目標

繪制拓撲圖， 實際上是個數據結構和算法的問題。 需要設計一個合適的數據結構來表達拓撲結構，設計一個算法來計算拓撲節點的位置及連接。

 

二、 實現思想

1. 數據結構

首先， 從節點開始。 顯然， 需要一個字段 type 表示節點類型， 一個字段 data 表示節點數據（詳情）， 對於連接， 則采用一個 rel 字段， 表示有哪些節點與之關聯， 相當於C 里面的指針。 為了唯一標識該節點， 還需要一個字段 key 。 通過 type-key 組合來唯一標識該節點。 這樣， 初步定下數據結構如下：

a. 節點數據結構: node = { type: 'typeName', key: 'key', rel: [], data: {'More Info'}}
b. rel, data 可選 , type-key 唯一標識該節點, rel 為空標識該節點為葉子節點
c. 關聯關系: rel: [node1, node2, ..., nodeN]
d. 更多詳情: 關於節點的更多信息可放置於此屬性中

2. 算法

在算法上， 要預先規划好各個節點類型如何布局以及如何連接。 連接方向很容易定： 根據起始節點及終止節點的類型組合， 可以規定不同的連接方向。 位置確定稍有點麻煩。 這里采用的方法是： 采用深度遍歷方法， 下一個的節點位置通過上一個節點位置確定， 不同類型的節點位置計算不一樣， 但是相同類型的節點位置是重合的， 需要在后面進行調整。實際上， 這個節點位置的算法是不夠高明的， 如果有更好的算法， 請告知。

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 asBottomCenter) -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 提供繪制拓撲圖的基本方法， 只要按照數據結構扔進去， 就可以自動繪制出拓撲圖來。

/**
 * 使用 jsPlumb 根據指定的拓撲數據結構繪制拓撲圖
 * 使用 drawTopo(topoData, nodeTypeArray) 方法
 * 
 */

/**
 * 初始化拓撲圖實例及外觀設置
 */
(function() {
    
    jsPlumb.importDefaults({
        
        DragOptions : { cursor: 'pointer', zIndex:2000 },
    
        EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
    
        Endpoints : [ [ "Dot", { radius:2 } ], [ "Dot", { radius: 2 } ]],
    
        ConnectionOverlays : [
            [ "Arrow", { location:1 } ],
            [ "Label", { 
                location:0.1,
                id:"label",
                cssClass:"aLabel"
            }]
        ]
    });
    
    var connectorPaintStyle = {
        lineWidth: 1,
        strokeStyle: "#096EBB",
        joinstyle:"round",
        outlineColor: "#096EBB",
        outlineWidth: 1
    };
    
    var connectorHoverStyle = {
        lineWidth: 2,
        strokeStyle: "#5C96BC",
        outlineWidth: 2,
        outlineColor:"white"
    };
    
    var endpointHoverStyle = {
        fillStyle:"#5C96BC"
    };
    
    window.topoDrawUtil = {
            
        sourceEndpoint: {
            endpoint:"Dot",
            paintStyle:{ 
                strokeStyle:"#1e8151",
                fillStyle:"transparent",
                radius: 2,
                lineWidth:2 
            },                
            isSource:true,
            maxConnections:-1,
            connector:[ "Flowchart", { stub:[40, 60], gap:10, cornerRadius:5, alwaysRespectStubs:true } ],                                                
            connectorStyle: connectorPaintStyle,
            hoverPaintStyle: endpointHoverStyle,
            connectorHoverStyle: connectorHoverStyle,
            dragOptions:{},
            overlays:[
                [ "Label", { 
                    location:[0.5, 1.5], 
                    label:"",
                    cssClass:"endpointSourceLabel" 
                } ]
            ]
        },
        
        targetEndpoint: {
            endpoint: "Dot",                    
            paintStyle: { fillStyle:"#1e8151",radius: 2 },
            hoverPaintStyle: endpointHoverStyle,
            maxConnections:-1,
            dropOptions:{ hoverClass:"hover", activeClass:"active" },
            isTarget:true,            
            overlays:[
                [ "Label", { location:[0.5, -0.5], label:"", cssClass:"endpointTargetLabel" } ]
            ]
        },
        
        initConnection: function(connection) {
            connection.getOverlay("label").setLabel(connection.sourceId + "-" + connection.targetId);
            connection.bind("editCompleted", function(o) {
                if (typeof console != "undefined")
                    console.log("connection edited. path is now ", o.path);
            });
        },            

        addEndpoints: function(toId, sourceAnchors, targetAnchors) {
            for (var i = 0; i < sourceAnchors.length; i++) {
                var sourceUUID = toId + sourceAnchors[i];
                jsPlumb.addEndpoint(toId, this.sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID });                        
            }
            for (var j = 0; j < targetAnchors.length; j++) {
                var targetUUID = toId + targetAnchors[j];
                jsPlumb.addEndpoint(toId, this.targetEndpoint, { anchor:targetAnchors[j], uuid:targetUUID });                        
            }
        }
    };


})();

/**
 * drawTopo 根據給定拓撲數據繪制拓撲圖
 * @param topoData 拓撲數據
 * @param rootPosition 拓撲圖根節點的位置
 * @param nodeTypeArray 節點類型數組
 * 
 * 拓撲圖的所有節點是自動生成的, DIV class = "node" , id= nodeType.toUpperCase + "-" + key 
 * 拓撲圖的所有節點連接也是自動生成的, 可以進行算法改善與優化, 但使用者不需要關心此問題
 * 需要定義節點類型數組 nodeTypeArray
 * 
 * 拓撲數據結構:
 * 1. 節點數據結構: node = { type: 'typeName', key: 'key', rel: [], data: {'More Info'}} 
 *    rel, data 可選 , type-key 唯一標識該節點
 * 2. 關聯關系: rel: [node1, node2, ..., nodeN]
 * 3. 更多詳情: 關於節點的更多信息可放置於此屬性中
 * 4. 示例:
 *   var topoData = {
 *            type: 'VM', key: '110.75.188.35', 
 *            rel: [
 *                 {   type: 'DEVICE', key: '3-120343' },
 *                 {      type: 'DEVICE', key: '3-120344' },
 *                 {      type: 'VIP',       key: '223.6.250.2',
 *                     rel: [
 *                         { type: 'VM', key: '110.75.189.12' },
 *                         { type: 'VM', key: '110.75.189.12' }
 *                     ]
 *                 },
 *                 {      type: 'NC',  key: '10.242.192.2',
 *                     rel: [
 *                       { type: 'VM', key: '110.75.188.132' },
 *                       { type: 'VM', key: '110.75.188.135' },
 *                       { type: 'VM', key: '110.75.188.140' }
 *                     ]
 *                 
 *                 }
 *            ]
 *        };
 * 
 */
function drawTopo(topoData, rootPosition, nodeTypeArray) {
    
    // 創建所有拓撲節點及連接並確定其位置
    createNodes(topoData, rootPosition, nodeTypeArray);
    
    // 調整重合節點的位置, 添加節點的附着點, 即連接線的端點
    adjust(topoData, nodeTypeArray);
    
    // 使所有拓撲節點均為可拉拽的                    
    jsPlumb.draggable(jsPlumb.getSelector(".node"), { grid: [5, 5] });
    
    // 創建所有節點連接
    createConnections(topoData, nodeTypeArray);
    
}

/**
 * 根據給定拓撲數據繪制拓撲節點並確定其位置, 使用深度優先遍歷
 * @param topoData 拓撲數據
 * @param rootPosition 根節點的位置設定
 * @param nodeTypeArray 拓撲節點類型
 */
function createNodes(rootData, rootPosition, nodeTypeArray) {
    
    if (rootData == null) {
        return ;
    }
    
    var topoRegion = $('#topoRegion');
    var relData = rootData.rel;
    var i=0, relLen = relLength(relData);;
    var VM_TYPE = nodeTypeArray[0];
    var DEVICE_TYPE = nodeTypeArray[1];
    var NC_TYPE = nodeTypeArray[2];
    var VIP_TYPE = nodeTypeArray[3];
    
    // 根節點的位置, 單位: px
    var rootTop = rootPosition[0];
    var rootLeft = rootPosition[1];
    
    var nextRootData = {};
    var nextRootPosition = [];
    
    // 自動生成並插入根節點的 DIV 
    var divStr = createDiv(rootData);
    var nodeDivId = obtainNodeDivId(rootData);
    topoRegion.append(divStr);
    //console.log(divStr);
    
    // 設置節點位置
    $('#'+nodeDivId).css('top', rootTop + 'px');
    $('#'+nodeDivId).css('left', rootLeft + 'px');
    
    for (i=0; i < relLen; i++) {
        nextRootData = relData[i];
        nextRootPosition = obtainNextRootPosition(rootData, nextRootData, rootPosition, nodeTypeArray);
        createNodes(nextRootData, nextRootPosition, nodeTypeArray);
    }

}

/**
 * 調整重合節點的位置, 並添加節點的附着點, 即連接線的端點
 */
function adjust(topoData, nodeTypeArray) {
    
    var vm_deviceOffset = 0;   // 起始節點為 vm , 終止節點為 device, device div 的偏移量
    var vm_vipOffset = 0;      // 起始節點為 vm , 終止節點為 vip, vip div 的偏移量
    var vm_ncOffset = 0;       // 起始節點為 vm , 終止節點為 nc, nc div 的偏移量 
    var vip_vmOffset = 0;      // 起始節點為 vip , 終止節點為 vm, vm div 的偏移量     
    var nc_vmOffset = 0;      // 起始節點為nc , 終止節點為 vm, vm div 的偏移量 
    var verticalDistance = 120;
    var horizontalDistance = 150;
    
    var VM_TYPE = nodeTypeArray[0];
    var DEVICE_TYPE = nodeTypeArray[1];
    var NC_TYPE = nodeTypeArray[2];
    var VIP_TYPE = nodeTypeArray[3];
    
    $('.node').each(function(index, element) {
        var nodeDivId = $(element).attr('id');
        var nodeType = nodeDivId.split('-')[0];
        var offset = $(element).offset();
        var originalTop = offset.top;
        var originalLeft = offset.left;
        var parentNode = $(element).parent();
        var parentNodeType = parentNode.attr('id').split('-')[0];
        switch (nodeType) {
            case VM_TYPE:
                // VM 位置水平偏移
                $(element).css('left', (originalLeft + vip_vmOffset*horizontalDistance) + 'px');
                vip_vmOffset++;
                topoDrawUtil.addEndpoints(nodeDivId, ['Top', 'Bottom', 'Right'], []);
                break;
            case DEVICE_TYPE:
                // DEVICE 位置垂直偏移
                $(element).css('top', (originalTop + (vm_deviceOffset-1)*verticalDistance) + 'px');
                vm_deviceOffset++;
                topoDrawUtil.addEndpoints(nodeDivId, [], ['Left']);
                break;
            case VIP_TYPE:
                // VIP 位置水平偏移
                $(element).css('left', (originalLeft + vm_vipOffset*horizontalDistance) + 'px');
                vm_vipOffset++;
                topoDrawUtil.addEndpoints(nodeDivId, ['Top'], ['Bottom']);
                break;
            case NC_TYPE:
                // NC 位置水平偏移
                $(element).css('left', (originalLeft + vm_ncOffset*verticalDistance) + 'px');
                vm_ncOffset++;
                topoDrawUtil.addEndpoints(nodeDivId, ['Bottom'], ['Top']);
                break;
            default:
                break;
        }
    });
}

/**
 * 獲取下一個根節點的位置, 若節點類型相同, 則位置會重合, 需要后續調整一次
 * @root            當前根節點
 * @nextRoot        下一個根節點
 * @rootPosition    當前根節點的位置
 * @nodeTypeArray   節點類型數組
 */
function obtainNextRootPosition(root, nextRoot, rootPosition, nodeTypeArray) {
    
    var VM_TYPE = nodeTypeArray[0];
    var DEVICE_TYPE = nodeTypeArray[1];
    var NC_TYPE = nodeTypeArray[2];
    var VIP_TYPE = nodeTypeArray[3];
    
    var startNodeType = root.type;
    var endNodeType = nextRoot.type;
    var nextRootPosition = [];
    var rootTop = rootPosition[0];
    var rootLeft = rootPosition[1];
    
    var verticalDistance = 120;
    var horizontalDistance = 250;
    var shortVerticalDistance = 80;
    
    switch (startNodeType) {
        case VM_TYPE:
            if (endNodeType == VIP_TYPE) {
                nextRootPosition = [rootTop-verticalDistance, rootLeft];
            }
            else if (endNodeType == DEVICE_TYPE) {
                nextRootPosition = [rootTop, rootLeft+horizontalDistance];
            }
            else if (endNodeType == NC_TYPE) {
                nextRootPosition = [rootTop+verticalDistance, rootLeft];
            }
            break;
        case VIP_TYPE:
            if (endNodeType == VM_TYPE) {
                nextRootPosition = [rootTop-shortVerticalDistance, rootLeft];
            }
            break;
        case NC_TYPE:
            if (endNodeType == VM_TYPE) {
                nextRootPosition = [rootTop+shortVerticalDistance, rootLeft];
            }
            break;
        default: 
            break;
    }
    return nextRootPosition;
}

/**
 * 根據給定拓撲數據, 繪制節點之間的連接關系, 使用深度優先遍歷
 * @param topoData 拓撲數據
 * @param nodeTypeArray 節點類型數組
 */
function createConnections(topoData, nodeTypeArray) {
    
    if (topoData == null) {
        return ;
    }
    var rootData = topoData;
    var relData = topoData.rel;
    var i=0, len = relLength(relData);;
    for (i=0; i < len; i++) {
        connectionNodes(rootData, relData[i], nodeTypeArray);
        createConnections(relData[i], nodeTypeArray);
    }        
}

/**
 * 連接起始節點和終止節點
 * @beginNode 起始節點
 * @endNode 終止節點
 * NOTE: 根據是起始節點與終止節點的類型
 */
function connectionNodes(beginNode, endNode, nodeTypeArray) 
{
    var startNodeType = beginNode.type;
    var endNodeType = endNode.type;
    var startDirection = '';
    var endDirection = '';
    
    var VM_TYPE = nodeTypeArray[0];
    var DEVICE_TYPE = nodeTypeArray[1];
    var NC_TYPE = nodeTypeArray[2];
    var VIP_TYPE = nodeTypeArray[3];
    
    switch (startNodeType) {
        case VM_TYPE:
            if (endNodeType == VIP_TYPE) {
                // VIP 繪制於 VM 上方
                startDirection = 'Top';
                endDirection = 'Bottom';
            }
            else if (endNodeType == DEVICE_TYPE) {
                // DEVICE 繪制於 VM 右方
                startDirection = 'Right';
                endDirection = 'Left';
            }
            else if (endNodeType == NC_TYPE) {
                // NC 繪制於 VM 下方
                startDirection = 'Bottom';
                endDirection = 'Top';
            }
            break;
        case VIP_TYPE:
            if (endNodeType == VM_TYPE) {
                // VM 繪制於 VIP 上方
                startDirection = 'Top';
                endDirection = 'Top';
            }
            break;
        case NC_TYPE:
            if (endNodeType == VM_TYPE) {
                // VM 繪制於 NC 下方
                startDirection = 'Bottom';
                endDirection = 'Bottom';
            }
            break;
        default: 
            break;
    }
    var startPoint = obtainNodeDivId(beginNode) + startDirection;
    var endPoint = obtainNodeDivId(endNode) + endDirection;
    jsPlumb.connect({uuids:[startPoint, endPoint], editable: false}); 
}

function createDiv(metaNode) {
    return '<div class="node" id="' + obtainNodeDivId(metaNode) + '"><strong>' 
            + metaNode.type + '<br/><a href="http://aliyun.com">' + metaNode.key + '</a><br/></strong></div>'
}

/**
 * 生成節點的 DIV id
 * divId = nodeType.toUpperCase + "-" + key
 * key 可能為 IP , 其中的 . 將被替換成 ZZZ , 因為 jquery id 選擇器中 . 屬於轉義字符.
 * eg. {type: 'VM', key: '1.1.1.1' }, divId = 'VM-1ZZZ1ZZZ1ZZZ1'
 */
function obtainNodeDivId(metaNode) {
    return metaNode.type.toUpperCase() + '-' + transferKey(metaNode.key);
}

function transferKey(key) {
    return key.replace(/\./g, 'ZZZ');
}

function revTransferKey(value) {
    return value.replace(/ZZZ/g, '.');
}


/**
 * 合並新的拓撲結構到原來的拓撲結構中, 新的拓撲結構中有節點與原拓撲結構中的某個節點相匹配: type-key 相等
 * @param srcTopoData 原來的拓撲結構
 * @param newTopoData 要添加的的拓撲結構
 */
function mergeNewTopo(srcTopoData, newTopoData) {
    
    var srcTopoData = shallowCopyTopo(srcTopoData);
    
    if (srcTopoData == null || newTopoData == null) {
        return srcTopoData || newTopoData;
    }
    
    var srcRoot = srcTopoData;
    var newRoot = newTopoData;

    var newRelData = newTopoData.rel;
    var i=0, newRelLen = relLength(newRelData);
    
    var matched = findMatched(srcRoot, newRoot);
    if (matched == null) {
        // 沒有找到匹配的節點, 直接返回原有的拓撲結構
        return srcTopoData;
    }
    matched.rel = matched.rel.concat(newRelData);
    return srcTopoData;
}

/**
 * 在原拓撲結構中查找與新拓撲結構根節點 newRootData 匹配的節點
 * @param srcRootData 原拓撲結構
 * @param newRootData 新拓撲結構的根節點
 * @returns 原拓撲結構中與新拓撲結構根節點匹配的節點 or null if not found
 */
function findMatched(srcRootData, newRootData) {
    var srcRelData = srcRootData.rel;
    var i=0, srcRelLen = relLength(srcRelData);
    var matched = null;
    if ((srcRootData.type == newRootData.type) && (srcRootData.key == newRootData.key)) {
        return srcRootData;
    }
    for (i=0; i<srcRelLen; i++) {
        matched = findMatched(srcRelData[i], newRootData);
        if (matched != null) {
            return matched;
        }
    }
    return matched;
}

function relLength(relData) {
    if (isArray(relData)) {
        return relData.length;
    } 
    return 0;
}

function isArray(value) {
    return value && (typeof value === 'object') && (typeof value.length === 'number');
}

/**
 * 淺復制拓撲結構
 */
function shallowCopyTopo(srcTopoData) {
    return srcTopoData;
}

/**
 * 深復制拓撲結構
 */
function deepCopyTopo(srcTopoData) {
    //TODO identical to deep copy of js json
}

 

topodemo.html 繪制拓撲圖的客戶端接口。 只要引進相應的依賴 JS，預置一個 <div id="topoRegion"></div>

<!doctype html>
<html>
    <head>
        <title>jsPlumb 1.5.3 - flowchart connectors demonstration - jQuery</title>
        <link rel="stylesheet" href="topo-all.css">
        <link rel="stylesheet" href="topo.css">
        
        <!-- DEP -->
        <script src="../jsPlumb/jquery-1.9.0-min.js"></script>
        <script src="../jsPlumb/jquery-ui-1.9.2-min.js"></script>
        
        <!-- /DEP -->
                
        <!-- JS -->
        <!-- support lib for bezier stuff -->
        <script src="../jsPlumb/jsBezier-0.6-min.js"></script> 
        <!-- <a href="http://www.it165.net/pro/webjsp/" target="_blank" class="keylink">jsp</a>lumb geom functions -->   
        <script src="../jsPlumb/<a href="http://www.it165.net/pro/webjsp/" target="_blank" class="keylink">jsp</a>lumb-geom-0.1.js"></script>
        <!-- jsplumb util -->
        <script src="../jsPlumb/util.js"></script>
        <!-- base DOM adapter -->
        <script src="../jsPlumb/dom-adapter.js"></script>        
        <!-- main jsplumb engine -->
        <script src="../jsPlumb/jsPlumb.js"></script>
        <!-- endpoint -->
        <script src="../jsPlumb/endpoint.js"></script>                
        <!-- connection -->
        <script src="../jsPlumb/connection.js"></script>
        <!-- anchors -->
        <script src="../jsPlumb/anchors.js"></script>        
        <!-- connectors, endpoint and overlays  -->
        <script src="../jsPlumb/defaults.js"></script>
        <!-- connector editors -->
        <script src="../jsPlumb/connector-editors.js"></script>
        <!-- bezier connectors -->
        <script src="../jsPlumb/connectors-bezier.js"></script>
        <!-- state machine connectors -->
        <script src="../jsPlumb/connectors-statemachine.js"></script>
        <!-- flowchart connectors -->
        <script src="../jsPlumb/connectors-flowchart.js"></script>        
        <!-- SVG renderer -->
        <script src="../jsPlumb/renderers-svg.js"></script>
        <!-- canvas renderer -->
        <script src="../jsPlumb/renderers-canvas.js"></script>
        <!-- vml renderer -->
        <script src="../jsPlumb/renderers-vml.js"></script>
        
        <!-- jquery jsPlumb adapter -->
        <script src="../jsPlumb/jquery.jsPlumb.js"></script>
        <!-- /JS -->
        
        <!--  demo code -->
        <script src="drawtopo.js"></script>
        
        <script type="text/javascript">
            jsPlumb.bind("ready", function() {
                
                // 拓撲數據結構根節點位置設置
                var rootPosition = [270, 300];
                var nodeTypeArray = ['VM', 'DEVICE', 'NC', 'VIP'];
                var topoData = {
                    type: 'VM', key: '110.75.188.35', 
                    rel: [
                         {
                             type: 'DEVICE',
                             key: '3-120343'
                         },
                        
                         {
                             type: 'DEVICE',
                             key: '3-120344'
                         },
                        
                         {
                             type: 'VIP',
                             key: '223.6.250.2',
                             rel: [
                                 { type: 'VM', key: '110.75.189.12' },
                                 { type: 'VM', key: '110.75.189.13' }
                             ]
                         },
                        
                         {
                             type: 'NC',
                             key: '10.242.192.2',
                             rel: [
                                 { type: 'VM', key: '110.75.188.132' },
                                 { type: 'VM', key: '110.75.188.135' }
                             ]
                         
                         }
                    ]
                };
                
                drawTopo(topoData, rootPosition, nodeTypeArray);
                
                var newTopoData = {
                    type: 'NC',
                    key: '10.242.192.2',
                    rel: [
                           { type: 'VM', key: '110.75.188.140' }
                    ]    
                };
                
                var mergedTopoData = mergeNewTopo(topoData, newTopoData);
                $('#topoRegion').empty();
                drawTopo(mergedTopoData, rootPosition, nodeTypeArray);
            
                
            });
        
        
        </script>
        
    </head>
    <body>        
        
        <div id="topoRegion">
        </div>
            
    </body>
</html>

 

樣式文件及依賴JS 見工程示例。 里面已經包含繪制拓撲圖的最小依賴。

四、 最終效果圖

 

 

源碼下載地址：http://download.csdn.net/detail/shuqin1984/6488513