<!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>
<!-- jsplumb geom functions -->
<script src="../jsPlumb/jsplumb-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>
jsPlumb 绘制拓扑图实例.rar （25个子文件） 
xtopodemo jsPlumb 
connectors-bezier.js 3KB dom-adapter.js 10KB jsBezier-0.6-min.js 4KB dom.jsPlumb.js 14KB connectors-flowchart.js 19KB drag.js 2KB jquery.jsPlumb.js 12KB connection.js 27KB util.js 18KB renderers-canvas.js 19KB endpoint.js 57KB renderers-vml.js 19KB jquery-ui-1.9.2-min.js 232KB jquery-1.9.0-min.js 91KB jsplumb-geom-0.1.js 8KB connectors-statemachine.js 13KB jsPlumb.js 112KB anchors.js 53KB renderers-svg.js 20KB connector-editors.js 16KB defaults.js 63KB topodemo drawtopo.js 14KB topo.css 561B
topodemo.html 3KB topo-all.css 2KB资源评论
