D3.js - 附加到 <div> 不工作

Question

我面臨一個非常奇怪的問題。

如果我嘗試將矩形附加到body它可以正常工作。 但是，如果我嘗試附加到<div> - 它不起作用

令人奇怪的是，在Fiddler上，這兩個版本都有效。

但是，在我的筆記本電腦上

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

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

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

在這看到類似的問題

D3 JS附加了div奇怪的結果

但是，無法從響應中得出什么來修復它。

謝謝。

Answer 1

空白屏幕是由於您的原始小提琴中拋出的異常。 打開您的開發工具並注意嘗試加載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")
    // ...
}