使用 D3 将 SVG 画布附加到主体以外的元素答案

【问题标题】：Append SVG canvas to element other than body using D3使用 D3 将 SVG 画布附加到主体以外的元素
【发布时间】：2012-12-01 16:23:18
【问题描述】：

如果脚本不在元素内，是否可以使用 D3.js 将 SVG 画布附加到 <body> 以外的元素？

例如，下面的代码不起作用：

<html>
<body>
<script src="../../d3.v2.js"></script>
<script>
    var vis = d3.select("#container")
        .append("svg:svg")
          .attr("width",w)
          .attr("height",h);
</script>

<div id="container"></div>

</body>

我看到的所有示例都使用d3.select("body").append....，但显然我们并不总是希望将画布立即附加到正文。

我发现如果 <script> 在容器 div 内，那么我可以使用 d3.select("#container") 但对我来说似乎很奇怪，我必须将我的脚本包含在我想要画布的特定容器内.

【问题讨论】：

标签： javascript html d3.js svg

【解决方案1】：

您正在尝试在 #container 存在之前选择它。您需要将代码放入onload 或将脚本移至页面中#container 下方。

【讨论】：

另外，脚本包括属于header。
这是一个值得商榷的点，因为有些人喜欢将所有或大部分脚本放在页面末尾，以防止它阻塞页面加载和渲染。
太好了，感谢您的快速回复。像魅力一样工作 - 也帮助我更好地理解 d3 选择器的工作原理。
我不知道为什么，但我见过的所有 d3 示例都会将 <script> 元素放在正文的开头。似乎它并没有真正提供如何与页面其余部分集成的很好的示例。
巨大！太感谢了。我已经坚持了 48 小时，快要发疯了