javascript - SVG 不位于 div/tab(li) 内

Question

您好，我目前正在尝试将 SVG 元素放入 div 内，但由于某种原因它位于 div 外部。

<div id="Force Layout" class="tabcontent">    
  <div class="ui-widget">    
    <input id="search">
    <button type="button" id="searchButton" onclick="searchNode()">Search</button>
    <button type="button" onclick="releasenode(); ">Release</button>    
  </div>
  <script> document.body.style.zoom = 1.0 </script>
  <div style="width: 100%; overflow:visible;"> </div>                   
  <div style="width:820px;  margin-top:50px;">  
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">    
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"> </script>
    <script type='text/javascript' src="http://bost.ocks.org/mike/fisheye/fisheye.js?0.0.3"> </script>
    <script type='text/javascript' src = "/Portfolio for Web design/index.js"> </script>
  </div> 
</div>

最终结果:

D3 始终可见，就好像它完全位于任何选项卡/div 之外

Answer 1

通常，我认为您不会按照您所展示的方式将 d3.js javascript 添加到 div 中。我希望看到看起来更像这样的代码:

<div id="container"></div>
<script type='text/javascript' src = "/Portfolio for Web design/index.js"</script>

然后在你的脚本中你可能会有一行这样的内容:

d3.select("#container").append("svg");

我猜您当前假设脚本生成 SVG，并在您的容器 div 内自动呈现。但情况并非如此 - 您 d3.js 必须显式引用要添加 SVG 的 div。