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

通常，我认为您不会以您显示的方式在 div 中添加 d3.js javascript。我希望看到看起来更像这样的代码：

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

然后在您的脚本中，您可能会有一行内容如下：

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

我猜您目前假设脚本生成 SVG，该 SVG 会在您的容器 div 内自动呈现。但事实并非如此 - 您 d3.js 必须明确引用要向其中添加 SVG 的 div。