本文实现的方法可以边异步加载数据边绘制拓扑图。 有若干点需要说明一下：
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":"it-cloudpc@alibaba-inc.com","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
使用 jsPlumb 绘制拓扑图 —— 异步加载与绘制的实现
原文地址：http://blog.csdn.net/lovesqcc/article/details/37668279
