使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现

        本文实现的方法可以边异步加载数据边绘制拓扑图。 有若干点需要说明一下：

        1.  一次性获取所有数据并绘制拓扑图， 请参见文章： <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现的最终显示效果与之类似， 所使用的基本方法与之类似。

        2.  在此次实现中， 可以一边异步加载数据一边绘制拓扑图， 是动态可扩展的； 

        3.  所有影响节点位置、布局的配置均放置在最前面， 便于修改， 避免在代码中穿梭， 浪费时间；

        4.  布局算法比之前的实现更加完善；

        5.  此实现由于与业务逻辑绑得比较紧， 可复用的部分不多， 但是可以作为一个模板， 用在读者自己的场景中， 自行修改相应的节点类型、URL等。

        6.  添加了附着点的点击事件处理， 可以刷新显示关联实体；

        7.  主流程很简单：  发送 AJAX 请求获取数据 ---> 创建节点（实际上就是DIV） ---> 计算节点位置、布局 ---> 添加节点附着点 ---> 缓存节点连接 ---> 连接所有现有的缓存节点连接。  多个 AJAX 请求的处理是异步的， 顺序没有控制。

        8.  代码：

/**
 * 使用 jsPlumb 根据指定的拓扑数据结构绘制拓扑图
 * 使用 drawTopo_asyn(vmName, regionNo, parentDivId) 方法
 */
/**
 * 初始化拓扑图实例及外观设置
 */
(function() {
    
    jsPlumb.importDefaults({
        
        DragOptions : { cursor: 'pointer', zIndex:2000 },
    
        EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
    
        Endpoints : [ [ "Dot", { radius:2 } ], [ "Dot", { radius: 2 } ]],
    
        ConnectionOverlays : [
            [ "Label", { 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: 4,
                lineWidth:2 
            },                
            isSource:true,
            maxConnections:-1,
            connector:[ "Flowchart", { stub:[40, 60], gap:1, 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);
            });
        },    
        
        removeAllEndPoints: function(nodeDivId) {
            jsPlumb.removeAllEndpoints($('#'+nodeDivId)); 
        },
        addEndpoints: function(toId, sourceAnchors, targetAnchors) {
            for (var i = 0; i < sourceAnchors.length; i++) {
                var sourceUUID = toId + sourceAnchors[i];
                var endPoint = jsPlumb.addEndpoint(toId, this.sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID });    
                endPoint.bind("click", function(endpoint) {
                    var anchorType = endpoint.anchor.type;
                    var nodeType = toId.split('_')[0];
                    var content = toId.split('_')[1];
                    if (nodeType == VM_TYPE) {
                        switch (anchorType) {
                            case 'Right':
                                cacheKey = 'VM-DEVICE-'+ vmNodeData.key;
                                cacheConnectionData[cacheKey] = null;
                                linkDevices(vmNodeData, vmNodeData.key);
                                break;
                            case 'Top':
                                cacheKey = 'VM-ACCOUNT-'+ vmNodeData.key;
                                cacheConnectionData[cacheKey] = null;
                                vmName = vmNodeData.key;
                                regionNo = vmNodeData.data.region_no;
                                linkAccount(vmNodeData, vmName, regionNo);
                                break;
                            case 'Bottom':
                                cacheKey = 'VM-NC-'+ vmNodeData.key;
                                cacheConnectionData[cacheKey] = null;
                                ncId = vmNodeData.data.nc_id;
                                regionNo = vmNodeData.data.region_no;
                                linkNc(vmNodeData, ncId, regionNo);
                                break;
                            case 'Left':
                                cacheKey = 'VM-VIP-'+ vmNodeData.key;
                                cacheConnectionData[cacheKey] = null;
                                vmInnerIp = vmNodeData.data.vm_inner_ip;
                                linkVips(vmNodeData, vmInnerIp);
                                break;
                            default:
                                break;
                        }
                    }
                    else if (nodeType == DEVICE_TYPE) {
                        if (anchorType == 'Bottom') {
                            cacheKey = 'DEVICE-SNAPSHOT-'+ content;
                            cacheConnectionData[cacheKey] = null;
                            deviceNodeData = deviceNodeDataMapping[content];
                            linkSnapshot(deviceNodeData.data.aliUid, content, deviceNodeData);
                        }
                    }
                });
            }
            for (var j = 0; j < targetAnchors.length; j++) {
                var targetUUID = toId + targetAnchors[j];
                jsPlumb.addEndpoint(toId, this.targetEndpoint, { anchor:targetAnchors[j], uuid:targetUUID });                        
            }
        }
    };
})();
//////////////////////////////////////////////////////////////////////////////
// 这里将所有用到的数据结构汇聚在这里, 避免修改时需要在代码中穿行, 浪费时间
/**
 * 重新刷新VM关联实体时需要使用到VM的信息,这里进行全局缓存,避免重复查询
 * 重新刷新VM关联实体时VM必定存在, vmNodeData 也必定是最近一次查询的结果
 */
var vmNodeData = {};
/**
 * 重新刷新磁盘关联快照实体时需要使用到磁盘的信息,这里进行全局缓存,避免重复查询
 * 重新刷新磁盘关联快照实体时磁盘必定存在,且必定是最近一次查询的结果
 * eg. {'instanceId': { "ecsInstanceId": "vmName", "houyiDiskId": "102-80012003",
                        "aliUid": aliUidNum,  "instanceId": "d-28ilj8rsf", ... }}
 */
var deviceNodeDataMapping = {};
/**
 * 拓扑图中的节点类型
 */
var nodeTypeArray = ['VM', 'DEVICE', 'NC', 'VIP', 'SNAPSHOT', 'CLUSTER', 'AVZ', 'ACCOUNT'];
var VM_TYPE = nodeTypeArray[0];
var DEVICE_TYPE = nodeTypeArray[1];
var NC_TYPE = nodeTypeArray[2];
var VIP_TYPE = nodeTypeArray[3];
var SNAPSHOT_TYPE= nodeTypeArray[4];
var CLUSTER_TYPE= nodeTypeArray[5];
var AVZ_TYPE= nodeTypeArray[6];
var ACCOUNT_TYPE= nodeTypeArray[7];
/**
 * cacheConnectionData 节点之间的已有连接数目缓存, 在计算节点位置及布局方法 computeLayout 中用到
 * eg. {
 *    'VM-DEVICE-vmkey': 2,  'VM-NC-vmkey':1,  'VM-VIP-vmkey':2 , 'VM-ACCOUNT-vmkey': 1,
 * } 
 * 表示已经有2磁盘/1NC/2VIP/1ACCOUNT 与VM(key 为 vmkey)连接, 这些信息用于计算与VM相连接的同类型的下一个实体的相对位置
 */
var cacheConnectionData = {};
/**
 * 连接关系的存储, 在 cacheConnections , reconnectAll 方法中用到
 * 由于重复节点会移动到新的位置,原有连接会出现断连现象, 因此采用"每次刷新拉取新实体时重连所有连线" 的策略, 可以保证实时性, 只要连接数不多重复连接的开销是可以接受的.
 * connections = [[startPoint1, endPoint1], [startPoint2, endPoint2], ..., [startPointN, endPointN]];
 */
var connections = [];
/**
 * 实体与实体上附着点方向的设置
 * DEVICE_TYPE: [['Right', 'Bottom'], ['Left']] 的含义是：
 * 对于DEVICE实体: 作为起始节点时, 附着点可以在右方中点(连接CLUSTER), 下方中点(连接快照); 作为终止节点时, 附着点仅在左方中点(连接VM) 
 */
var entityEndPointsMapping = {
    "VM": [['Top', 'Bottom', 'Right', 'Left'], []],
    "DEVICE": [['Right', 'Bottom'], ['Left']],
    "NC": [['Bottom'], ['Top']],
    "VIP": [[], ['Right']],
    "SNAPSHOT": [[], ['Top']],
    "CLUSTER": [[], ['Left', 'Top']],
    "AVZ": [['Bottom'], ['Top']],
    "ACCOUNT": [[], ['Bottom']]
};
/**
 * 连接线附着点方向设置
 * "VM-ACCOUNT": ['Top', 'Bottom'] 的含义是：
 * VM 的上方附着点 与 ACCOUNT 的下方附着点的连接
 */
var connectionDirectionMapping = {
    "VM-ACCOUNT": ['Top', 'Bottom'],
    "VM-NC": ['Bottom', 'Top'],
    "NC-CLUSTER": ['Bottom', 'Top'],
    "VM-DEVICE": ['Right', 'Left'],
    "DEVICE-CLUSTER": ['Right', 'Left'],
    "VM-VIP": ['Left', 'Right'],
    "DEVICE-SNAPSHOT": ['Bottom', 'Top']
}
/**
 * 节点之间的水平与垂直相对位置
 */
var largeVerticalDistance = 270;
var verticalDistance = 220;
var horizontalDistance = 300;
var shortVerticalDistance = 50;
var shortHorizontalDistance = 220;
/**
 * 节点之间的水平或垂直相对位置和距离的设置
 * "VM-DEVICE": [largeVerticalDistance, horizontalDistance] 
 */
var connectionDistanceMapping = {
    "VM-ACCOUNT": [-verticalDistance, 0],
    "VM-NC": [shortVerticalDistance, 0],
    "NC-CLUSTER": [shortVerticalDistance, 0],
    "VM-DEVICE": [largeVerticalDistance, horizontalDistance],
    "DEVICE-CLUSTER": [-108, horizontalDistance],
    "VM-VIP": [verticalDistance, -horizontalDistance],
    "DEVICE-SNAPSHOT": [shortVerticalDistance, shortHorizontalDistance]
}
/**
 * 根节点位置
 */
rootPosition = [220, 360];
rootTop = rootPosition[0];
rootLeft = rootPosition[1];
var parentDiv = null;
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function drawtopo_asyn(vmName, regionNo, parentDivId) {
    
    parentDiv = $('#'+parentDivId);
    
    var vmInfoReq = {
        'url':     httpPrefix + '/controllers/vm/obtainVmData',
        'params' : {
            'vm_name' : vmName,
            'region_no': regionNo
        }
    };
    var vmjq = doAjaxRequest(vmInfoReq);
    var vmInfoLoadedAfter = function(resultJson) {
        
        vmNodeData = resultJson.result.data;
        if (vmNodeData == null) {
            alert('没有找到VM的相关信息!');
            return ;
        }
        vmNode = createDiv(vmNodeData);
        
        vmDivId = obtainNodeDivId(vmNodeData);
        $('#'+vmDivId).css('top', rootTop + 'px');
        $('#'+vmDivId).css('left', rootLeft + 'px');
        
        linkAccount(vmNodeData, vmName, regionNo);
        
        ncId = vmNodeData.data.nc_id;
        linkNc(vmNodeData, ncId, regionNo);
        
        // vmName = 'ATX-28n2dhdq8';
        linkDevices(vmNodeData, vmName);
        
        vmInnerIp = vmNodeData.data.vm_inner_ip;
        linkVips(vmNodeData, vmInnerIp);
        
    };
    vmjq.done(vmInfoLoadedAfter);
}
function linkAccount(vmNodeData, vmName, regionNo) {
    var accountInfoReq = {
        'url': httpPrefix + '/controllers/vm/obtainAliyunAccountInfo',
        'params': {
            'vm_name' : vmName,
            'region_no': regionNo
        }
    };
    var accountjq = doAjaxRequest(accountInfoReq);
    accountjq.done(function(resultJson) {
        
        // for test
        // resultJson = {"result":{"msg":"successful","code":200,"data":{"errorCode":null,"errorMsg":null,"aliyunID":"[email protected]","kp":null},"success":true}};
        
        if (resultJson.result.success) {
            accountData = resultJson.result.data;
            accountNodeData = createAccountData(accountData);
            accountNode = createDiv(accountNodeData);
            cacheConnections(vmNodeData, accountNodeData, obtainConnectionDirections(vmNodeData, accountNodeData));
            reconnectAll(connections);
        }
        else {
            $('#error').append('获取关联云账号信息失败！');
        }
    }).fail(function() {
        $('#error').append('获取关联云账号信息失败！ ');
    });
    
}
function linkNc(vmNodeData, ncId, regionNo) {
    var ncInfoReq = {
        'url':     httpPrefix + '/controllers/nc/listNc',
        'params': {
            'region_no': regionNo,
            'nc_id': ncId,
            'start': 0,
            'page': 1,
            'limit': 1
        }
    };
    var ncjq = doAjaxRequest(ncInfoReq);
    ncjq.done(function(resultJson) {
        ncDataList = resultJson.data;
        if (ncDataList.length > 0) {
            ncData = ncDataList[0];
            ncNodeData = createNcData(ncData);
            ncNode = createDiv(ncNodeData);
            cacheConnections(vmNodeData, ncNodeData, obtainConnectionDirections(vmNodeData, ncNodeData));
            
            ncClusterNodeData = createNcClusterData(ncData);
            ncClusterNode = createDiv(ncClusterNodeData);
            cacheConnections(ncNodeData, ncClusterNodeData, obtainConnectionDirections(ncNodeData, ncClusterNodeData));
            reconnectAll(connections);
        }
        else {
            $('#error').append('获取关联NC实体失败！');
        }
    }).fail(function() {
        $('#error').append('获取关联NC实体失败！');
    });
}
function linkDevices(vmNodeData, vmName) {
    var deviceInfoReq = {
        'url' :  httpPrefix + '/controllers/disk/search',
        'params': {
            'vmName': vmName
        }
    }
    var regionPeNickName = vmNodeData.data.region_pe_nickname;
    var devicejq = doAjaxRequest(deviceInfoReq);
    devicejq.done(function(resultJson) {
        
        total = resultJson.data.total;
        if (total > 0) {
            devices = resultJson.data.list;
            
            for (var i=0; i<total; i++) {
                
                deviceData = devices[i];
                deviceData['regionPeNickName'] = regionPeNickName;
                deviceNodeData = createDeviceData(deviceData);
                deviceNodeDataMapping[deviceData.instanceId] = deviceNodeData;
                deviceNode = createDiv(deviceNodeData);
                cacheConnections(vmNodeData, deviceNodeData, obtainConnectionDirections(vmNodeData, deviceNodeData));
                
                deviceClusterNodeData = createDeviceClusterData(deviceData);
                deviceClusterNode = createDiv(deviceClusterNodeData);
                cacheConnections(deviceNodeData, deviceClusterNodeData, obtainConnectionDirections(deviceNodeData,deviceClusterNodeData));
                linkSnapshot(devices[i].aliUid, devices[i].instanceId, deviceNodeData);
            }
            reconnectAll(connections);
        }
        else {
            $('#error').append('该VM没有关联的磁盘实体！');
        }
    }).fail(function() {
        $('#error').append('获取关联磁盘实体失败！');
    });
}
function linkVips(vmNodeData, vmInnerIp) {
    
    var vipInfoReq = {
        'url': httpPrefix + '/controllers/slbvip/listVip',
        'params': {
            'realserver_param': vmInnerIp,
            'start': 0,
            'page': 1,
            'limit': 100
        }
    };
    var vipjq = doAjaxRequest(vipInfoReq);
    vipjq.done(function(resultJson) {
        
        total = resultJson.total;
        vips = resultJson.data;
        if (total > 0) {
            for (j=0; j<total; j++) {
                var vipInfo = vips[j];
                vipNodeData = createVipData(vipInfo);
                vipNode = createDiv(vipNodeData);
                cacheConnections(vmNodeData, vipNodeData, obtainConnectionDirections(vmNodeData,vipNodeData));
            }
            reconnectAll(connections);
        }
        else {
            $('#error').append('该VM没有关联的VIP实体！');
        }
    }).fail(function() {
        $('#error').append('获取关联VIP实体失败！');
    });
    
}
function linkSnapshot(aliUid, diskId, deviceNodeData) {
    
    var snapshotInfoReq = {
        'url': httpPrefix + '/controllers/snapshot/search',
        'params': {
            'aliUid': aliUid,
            'diskId': diskId
        }
    };
    var snapshotjq = doAjaxRequest(snapshotInfoReq);
    snapshotjq.done(function(resultJson) {
        
        total = resultJson.total;
        if (total > 0) {
            snapshotDataList = resultJson.list;
            for (k=0; k<total; k++) {
                snapshotData = snapshotDataList[k];
                snapshotNodeData = createSnapshotData(snapshotData);
                snapshotNode = createDiv(snapshotNodeData);
                cacheConnections(deviceNodeData, snapshotNodeData, obtainConnectionDirections(deviceNodeData, snapshotNodeData));
            }
            reconnectAll(connections);
        }
        else {
            $('#error').append('磁盘 ' + diskId + ' 没有关联的快照实体！');
        }
    }).fail(function() {
        $('#error').append('磁盘' + diskId + ' 获取关联快照实体失败！');
    });
}
/**
 * createXXXData
 * 创建拓扑图所使用的节点数据  
 */
function createVmData(vmData) {
    return {
        'type': 'VM',
        'key': vmData.vm_name,
        'data': vmData
    }
}
function createNcData(ncData) {
    return {
        'type': 'NC',
        'key': ncData.ip,
        'data': ncData
    }
}
function createNcClusterData(ncData) {
    return {
        'type': 'CLUSTER',
        'key': ncData.regionPeNickName,
        'data': {
            'regionNo': ncData.regionNo,
            'regionNickName': ncData.regionNickName,
            'regionPeNickName': ncData.regionPeNickName
        }
    }
}
function createDeviceData(deviceData) {
    return {
        'type': 'DEVICE',
        'key': deviceData.instanceId,
        'data': deviceData
    }
}
function createDeviceClusterData(deviceData) {
    return {
        'type': 'CLUSTER',
        'key': deviceData.regionNo,
        'data': {
            'regionNo': deviceData.regionNo
        }
    }
}
function createSnapshotData(snapshotData) {
    return {
        'type': 'SNAPSHOT',
        'key': snapshotData.snapshotId,
        'data': snapshotData 
    }
}
function createSnapshotClusterData(snapshotData) {
    return {
        'type': 'CLUSTER',
        'key': snapshotData.regionNo,
        'data': {
            'regionNo': snapshotData.regionNo
        }
    }
}
function createVipData(vipData) {
    return {
        'type': 'VIP',
        'key': vipData.vipAddress,
        'data': vipData
    }
}
function createAccountData(accountData) {
    return {
        'type': 'ACCOUNT',
        'key': accountData.aliyunID,
        'data': accountData
    }
}
/**
 * 缓存起始节点 beginNode 和终止节点 endNode 的连接关系 
 */
function cacheConnections(beginNode, endNode, directions) {
    
    computeLayout(beginNode, endNode);
    
    var startPoint = obtainNodeDivId(beginNode) + directions[0];
    var endPoint = obtainNodeDivId(endNode) + directions[1];
    connections.push([startPoint, endPoint]);
}
/**
 * 计算节点位置及布局
 */
function computeLayout(beginNode, endNode) {
    
    var beginDivId = obtainNodeDivId(beginNode);
    var endDivId = obtainNodeDivId(endNode);
    var beginNodeType = beginNode.type;
    var endNodeType = endNode.type;
    
    beginNodeTop = $('#'+beginDivId).offset().top;
    beginNodeLeft = $('#'+beginDivId).offset().left;
    
    var key = beginNodeType + '-' + endNodeType + '-' + beginNode.key;
    if (cacheConnectionData[key] == null) {
        cacheConnectionData[key] = -1;
    }
    else {
        cacheConnectionData[key] = cacheConnectionData[key]+1;
    }
    connNum = cacheConnectionData[key];
    
    var typeKey = beginNodeType + '-' + endNodeType;
    var relDistance = connectionDistanceMapping[typeKey];
    var relVertiDistance = relDistance[0];
    var relHoriDistance = relDistance[1];
    
    switch (beginNodeType) {
        case VM_TYPE:
            if (endNodeType == VIP_TYPE) {
                endNodePosition = [beginNodeTop+connNum*relVertiDistance, beginNodeLeft+relHoriDistance];
            }
            else if (endNodeType == DEVICE_TYPE) {
                endNodePosition = [beginNodeTop+connNum*relVertiDistance, beginNodeLeft+relHoriDistance];
            }
            else if (endNodeType == NC_TYPE) {
                endNodePosition = [beginNodeTop+relVertiDistance, beginNodeLeft+relHoriDistance];
            }
            else if (endNodeType == ACCOUNT_TYPE) {
                endNodePosition = [beginNodeTop+relVertiDistance, beginNodeLeft+relHoriDistance];
            }
            break;
        case DEVICE_TYPE:
            if (endNodeType == CLUSTER_TYPE) {
                endNodePosition = [beginNodeTop+relVertiDistance, beginNodeLeft+relHoriDistance];
            }
            else if (endNodeType == SNAPSHOT_TYPE) {
                endNodePosition = [beginNodeTop+relVertiDistance, beginNodeLeft+(connNum+1)*relHoriDistance];
            }
            break;
        case VIP_TYPE:
            break;
        case NC_TYPE:
            if (endNodeType == CLUSTER_TYPE) {
                endNodePosition = [beginNodeTop+relVertiDistance, beginNodeLeft+relHoriDistance];
            }
            break;
        case SNAPSHOT_TYPE:
        default: 
            break;
    }
    
    $('#'+endDivId).css('top', endNodePosition[0] + 'px');
    $('#'+endDivId).css('left', endNodePosition[1] + 'px');
    
    addEndPoints(beginDivId, beginNodeType);
    addEndPoints(endDivId, endNodeType);
}
/**
 * 为节点添加用于连线的附着点
 * @param nodeDivId  节点的 DIV ID
 * @param type  节点类型
 */
function addEndPoints(nodeDivId, type) {
    var startAttachedPoints = entityEndPointsMapping[type][0];
    var endAttachedPoints = entityEndPointsMapping[type][1];
    topoDrawUtil.addEndpoints(nodeDivId, startAttachedPoints, endAttachedPoints);
}
/**
 * 连接所有连线
 */
function reconnectAll(connections) {
    
    var i=0;
    for (i=0; i<connections.length; i++) {
        jsPlumb.connect({uuids:connections[i], editable: false}); 
    }
    // 使所有拓扑节点均为可拉拽的                    
    jsPlumb.draggable(jsPlumb.getSelector(".node"), { grid: [5, 5] });
}
/**
 * div id cache , avoid duplicated div.
 * {'divId': 'divStr'}
 */
divIdCache = {};
/**
 * 为节点数据创建节点\附着点并返回节点的DIV
 */
function createDiv(metaNode) {
    var clickUrl = '';
    var display = '';
    var type = metaNode.type;
    var regionPeNickname = '';
    if (metaNode.data != null) {
        regionPeNickname = metaNode.data.regionPeNickName;
    }
    
    nodeDivId = obtainNodeDivId(metaNode);
    
    if (divIdCache[nodeDivId] != null) {
        // 该节点要移动到新的位置, 因此原来的附着点要去掉
        topoDrawUtil.removeAllEndPoints(nodeDivId);
        return divIdCache[nodeDivId];
    }
    
    switch(type.toUpperCase()) {
        case VM_TYPE:
            clickUrl = httpPrefix + '/framehtml/vm_monitor.html?vm_name=' + metaNode.key + '&data='+JSON.stringify(metaNode.data).replace(/\"/g,"'");
            display = metaNode.key;
            break;
        case DEVICE_TYPE:
            displayDevice1 = metaNode.data.instanceId;
            clickDeviceUrl2 = httpPrefix + '/framehtml/device_monitor.html?device_id=' + metaNode.data.houyiDiskId + '®ion_pe_nickname='+regionPeNickname;
            displayDevice2 = metaNode.data.houyiDiskId;
            break;
        case NC_TYPE:
            var regionNo = metaNode.data.regionNo;
            clickUrl = httpPrefix + '/framehtml/nc_monitor.html?nc_ip=' + metaNode.key + '®ion_pe_nickname='+regionPeNickname + '®ion_no='+regionNo;
            display = metaNode.key;
            break;
        case VIP_TYPE:
            display = metaNode.key + ':' + metaNode.data.port;
            clickUrl = httpPrefix + '/framehtml/vip_monitor.html?vip=' + display + '®ion_pe_nickname='+regionPeNickname + '&slbdb_configId='+metaNode.data.slbdb_configId;
            break;
        case SNAPSHOT_TYPE:
            display = metaNode.key + '<br/>' + metaNode.data.houyiSnapshotId + '<br/><span style="color:green">'+ metaNode.data.regionNo + '</span>';
            break;
        case CLUSTER_TYPE:
        case AVZ_TYPE:
        case ACCOUNT_TYPE:
            display = metaNode.key;
            break;
        default:
            break;
    } 
    
    if (type == VM_TYPE || type == NC_TYPE || type == VIP_TYPE || type == ACCOUNT_TYPE ) {
        divStr =  '<div class="node biggerNode" id="' + nodeDivId + '"><strong>' 
                + metaNode.type + '<br/><a href="' + clickUrl + '" target="_blank">' + display + '</a><br/></strong></div>';
    }
    else if (type == DEVICE_TYPE){
        divStr =  '<div class="node biggerNode" id="' + nodeDivId + '"><strong>' 
        + metaNode.type + '<br/>' + displayDevice1 + '<br/><a href="' + clickDeviceUrl2 + '" target="_blank">' + displayDevice2 + '</a><br/></strong></div>';
    }
    else {
        divStr = '<div class="node biggerNode" id="' + nodeDivId + '"><strong>' 
                + metaNode.type + '<br/>' + display + '<br/></strong></div>';
    }
    parentDiv.append(divStr);
    
    divIdCache[nodeDivId] = divStr;
    return divStr;
}
function obtainConnectionDirections(srcNodeData, destNodeData) {
    var key = srcNodeData.type + '-' + destNodeData.type;
    var startDirection = connectionDirectionMapping[key][0];
    var endDirection = connectionDirectionMapping[key][1];
    return [startDirection, endDirection];
}
/**
 * 生成节点的 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) {
    if (metaNode.type == VIP_TYPE) {
        return metaNode.type.toUpperCase() + '_' + transferKey(metaNode.key) + '_' + metaNode.data.port;
    }
    return metaNode.type.toUpperCase() + '_' + transferKey(metaNode.key);
}
function transferKey(key) {
    return key.replace(/\./g, 'ZZZ').replace(/\@/g,'YYY');
}
function revTransferKey(value) {
    return value.replace(/ZZZ/g, '.').replace('/YYY/g','@');
}  

使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现,古老的榕树,5-wow.com