Question

我面临一个非常奇怪的问题。

如果我尝试将矩形附加到body，它可以正常工作。但是，如果我尝试附加到<div> - 它无效

令人奇怪的是，在Fiddler上，这两个版本都有效。

然而，在我的笔记本电脑上

d3.select("#chart").append("svg")

不起作用（显示空白屏幕）。虽然以下工作

d3.select("body").append("svg")

在这里看到类似的问题

但是，无法从响应中找出解决问题的方法。

谢谢。

Answer 1

空白屏幕是由于Original Fiddle内引发的例外情况造成的。打开您的开发工具并注意尝试加载d3.js的错误。具体地说...

混合内容：“https://fiddle.jshell.net/_display/”的页面是通过HTTPS加载，但请求一个不安全的脚本 'http://d3js.org/d3.v3.min.js'。此请求已被阻止;该内容必须通过HTTPS提供。

这当然会引起

的直接例外

未捕获的ReferenceError：未定义d3

所以，在这个不适合小提琴的范围之外 - 代码工作正常。

d3.select("#chart").append("svg")

JSFiddle Link - 按预期工作

有什么不同？我为每个错误更改了我的<script>来源

修改

根据讨论，引用的代码可能在加载DOM之前触发。使用以下代码解包问题将解决问题

window.onload = function () {
    // ...
    d3.select("#chart").append("svg")
    // ...
}