本文实现的方法可以边异步加载数据边绘制拓扑图。 有若干点需要说明一下:
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 绘制拓扑图 —— 异步加载与绘制的实现,布布扣,bubuko.com
时间: 2024-10-28 19:32:17