d3可視化沒有出現

我想獲得一個非常基本的d3可視化工作，但我得到的只是一個空白的瀏覽器窗口。d3可視化沒有出現

這裏是我的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <script src="code.js"></script> 
    <title>My Title</title> 
    </head> 
    <body> 
    <div class="container"></div> 
    </body> 
</html>

這裏是我的code.js：

console.log("test"); 

d3.select("body").append("h1").html("Here are some words")

我的控制檯打印test。但瀏覽器窗口中沒有任何內容。當我inspect element，什麼都沒有被添加。

我試過通過python -m SimpleHTTPServer和npm install -g http-server加http-server &加載本地主頁。

怎麼回事？

來源

2017-08-25 jslutzky

你檢查你的網絡線路如果您的d3 js文件正在加載，請在瀏覽器中查看部分？ – Aby

@AbhayDixit網絡選項卡表示正在加載，代碼爲200. – jslutzky

如果在控制檯中執行'd3'命令，會發生什麼情況？ –

你需要改變你的HTML代碼如下代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v4.min.js"></script>  
    <title>My Title</title> 
    </head> 
    <body> 
     <div class="container"></div> 
     <script type="text/javascript" src="code.js"></script> 
</body> 
</html>

我只是把它引用「code.js的」體內標籤

來源

2017-08-25 17:50:00

這是有效的。奇怪的是，我以前從來沒有這樣做過，以便讓d3工作。我的其他項目使用Rails和Angular，但這個項目是純JS。爲什麼在@MaximilianPeters的JSFiddle中可以正常工作？ – jslutzky

雖然我知道你的答案爲什麼起作用，但OP沒有。也許你應該解釋爲什麼你的答案有效，所以其他未來的訪問者也不會迷惑。 –

@RobertLongson我很樂意爲您解釋！ – jslutzky

d3可視化沒有出現

回答

相關問題