各个应用系统、服务器信息及系统直接的调用都录入到数据库中.
前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来.
如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来。
直接上图上代码:可用于绘制拓扑结构图.
Ext.define('EB.view.content.SingleView', {
extend : 'Ext.panel.Panel',
alias : 'widget.singleview',
layout : 'fit',
title : 'single view',
initComponent : function() {
this.callParent(arguments)
},
onRender : function() {
var me = this
me.doc = Ext.getDoc()
me.callParent(arguments)
me.drawMap()
},
drawMap : function() {
var width = 960, height = 500
var target = d3.select("#" + this.id+"-body")
var svg = target.append("svg").attr("width", width).attr("height",
height)
var force = d3.layout.force().gravity(.05).distance(100).charge(-100)
.size([width, height])
// get from:
// example: force-directed images and labels
d3.json("graph.json", function(json) {
force.nodes(json.nodes).links(json.links).start()
var link = svg.selectAll(".link").data(json.links).enter()
.append("line").attr("class", "link")
var node = svg.selectAll(".node").data(json.nodes).enter()
.append("g").attr("class", "node").call(force.drag)
node.append("image").attr("xlink:href",
"
).attr("x", -8).attr("y",
-8).attr("width", 16).attr("height", 16)
node.append("text").attr("dx", 12).attr("dy", ".35em").text(
function(d) {
return d.name
})
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x
}).attr("y1", function(d) {
return d.source.y
}).attr("x2", function(d) {
return d.target.x
}).attr("y2", function(d) {
return d.target.y
})
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"
})
})
})
}
})
1.各个应用系统、服务器信息及系统直接的调用都录入到数据库中2.前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来
3.如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来。
