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始终可见，就好像它位于任何tab / 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会自动在容器div中呈现。但情况并非如此 - 你d3.js必须明确引用要添加SVG的div。