SVG 不位于 div/tab(li) 内答案

【问题标题】：SVG not sitting inside a div/tab(li)SVG 不位于 div/tab(li) 内
【发布时间】：2016-09-09 05:02:48
【问题描述】：

您好，我目前正在尝试将 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 之外

【问题讨论】：

我在任何地方都看不到 SVG ！你介意添加它吗？
抱歉，SVG 运行在“
没关系。但是，您需要包含用于 SVG 的CSS 和 用于 SVG 的 JS（至少是它被创建并添加到 div 的部分），以便潜在的回答者有足够的信息找出问题所在。 :)

标签： javascript html d3.js svg

【解决方案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。

【讨论】：

非常感谢巴特尔，最初我有 d3.select("body").append("svg");感觉好……没经验哈哈