在index.html中我有这个代码定义了图像。图像不是树形布局的一部分，它们会被显示出来
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link href="css/LatencySummary.css" rel="stylesheet" type="text/css">
<link href="css/NetworkTopology.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/d3/d3.v3.js"></script>
<script type="text/javascript" src="networkTopology.js"></script>
<title>JetPort UI</title>
<style type="text/css">
.node {
cursor: pointer;
}
.overlay {
background-color: #fff;
}
.node circle {
fill: #fff;
stroke: #fff;
stroke-width: 1.5px;
}
.node text {
font-size: 10px;
font-family: sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
.templink {
fill: none;
stroke: red;
stroke-width: 3px;
}
.ghostCircle.show {
display: block;
}
.ghostCircle,.activeDrag .ghostCircle {
display: none;
}
</style>
</head>
<body onload="loadGraph()">
<div id="bg">
<img id="imgBG" src="image/oceanBackground.png" alt="" height="100%"
width="100%">
</div>
<div id="titleDiv" style="height: 35px;">
<img id="logo" src="image/appLogo_white.png" height="100%" width="5%"
align="left"> <span
style="position: relative; top: 15px; left: 250px"> <font
face="Arial" size="5" color="white">Shooting Game Application</font>
</span>
</div>
<svg id="mySvg" width="10" height="10">
<defs id="mdef">
<filter id="webserver" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/web-servernew.png" />
</filter>
<filter id="container" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/container-osnew.png" />
</filter>
<filter id="containerCollapse" x="0%" y="0%" width="120%"
height="160%">
<feImage xlink:href="image/container-os-collapse.png" />
</filter>
<filter id="appserver" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/App-servernew.png" />
</filter>
<filter id="virtualMac" x="0%" y="0%" width="200%" height="200%">
<feImage xlink:href="image/virtual-machine.png" />
</filter>
<filter id="virtualMacCollapse" x="0%" y="0%" width="200%"
height="200%">
<feImage xlink:href="image/virtual-machine_collapse.png" />
</filter>
<filter id="dbserver" x="0%" y="0%" width="120%" height="140%">
<feImage xlink:href="image/DB-servernew.png" />
</filter>
<filter id="network" x="0%" y="0%" width="200%" height="300%">
<feImage xlink:href="image/network.png" />
</filter>
<filter id="networkCollapse" x="0%" y="0%" width="200%" height="300%">
<feImage xlink:href="image/network-collapse.png" />
</filter>
<filter id="loadbalancer" x="0%" y="0%" width="150%" height="200%">
<feImage xlink:href="image/Dynamic-load-Balancer.png" />
</filter>
<filter id="storage" x="0%" y="0%" width="150%" height="200%">
<feImage xlink:href="image/network_storage.png" />
</filter>
</defs>
</svg>
<div id="tableDiv">
<table class="jumbotron" bgcolor="#B1C1CB" style="margin-left: 200px;">
<tr>
<td>
<div id="progressDiv">
<img id="progress" src="image/progressBar.gif"> <font
face="Arial" size="2" style="font-weight: bold" color="#0D0C0C">Loading...</font>
</div>
<div id="graph" class="chart" align="right" style="height: 250px"></div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div style="height: 2px; text-align: left;">
<span style="position: relative; right: -0.5%; font-weight: bold">
<font face="Arial" size="3" color="#040404">Network
Topology</font>
</span>
</div>
</td>
</tr>
<tr>
<td style="padding-left: 5px">
<div id="tree-container" onclick="divClick(event)"></div>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/dynamicData.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>