2014-01-06 24 views
0

在Safari瀏覽器(窗口)中沒有顯示D3樹佈局的.png圖像。在Firefox和鉻它工作正常。這不是樹佈局的一部分,其他的PNG圖片顯示顯示樹形佈局的PNG圖像的問題沒有得到顯示在Safari瀏覽器(窗口)

index.html中我有這樣的代碼,其中圖像defined.images不屬於他們越來越顯示

  <!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> 
+0

再次,你介意發佈一些代碼? –

+0

請參閱http://stackoverflow.com/questions/20797521/is-it-possible-to-increase-gap-for-one-of-the-node-of-my-tree-layout-in-d3- js。我在這裏發佈了index.html(主頁)的code.code,我在上面的查詢中更新了 – javalearner

+0

能否請您發佈* current *代碼的*相關*部分?特別是在你添加圖像的地方。 –

回答

2

在SVG樹佈局的一部分,您需要使用image元素來顯示圖像。有關更多信息,請參閱this question