如何正確導入數據到d3js

我對D3.js的學習和演示感到非常興奮。而且我被卡在數據導入部分。我已經嘗試了一個月，並且找不到解決方案。如何正確導入數據到d3js

如果數據被簡單地粘貼在代碼中，那麼腳本工作得很好。但是一旦我嘗試從腳本外部導入數據。該網頁不會顯示任何內容。

有人可以友好地給我一隻手嗎？

這裏是我的腳本和數據：

工作版本：

<!DOCTYPE html> 
<html> 
<head>  
    <charset=utf-8"> 
    <title>Successful Data Comination In Bar Chart</title> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
</head> 
<body> 
    <script> 

    var dataset = [{"name":"AAA", "age":10},{"name":"BBB", "age":20},{"name":"CCC", "age":30}]; 

    var canvas = d3.select("body").append("svg") 
      .attr("width", 500) 
      .attr("height", 500); 

    canvas.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("width", function (d) { return d.age*10; }) 
      .attr("height", 48) 
      .attr("y", function (d,i) { return i*50; }) 
      .attr("fill", "gray"); 

    canvas.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .attr("fill", "white") 
      .attr("x", 2) 
      .attr("y", function (d,i) { return i*50 +27; }) 
      .text(function (d) { return d.name + " " + d.age; }); 

    </script> 
</body> 
</html>

不工作的版本：

<!DOCTYPE html> 
<html> 
<head>  
    <charset=utf-8"> 
    <title>Testing Pie Chart</title> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
</head> 

<body> 
    <script> 

    var dataset = []; 

    d3.json("mydata.json", function(data) { 

     dataset = data; 

     var canvas = d3.select("body").append("svg") 
      .attr("width", 500) 
      .attr("height", 500); 



     canvas.selectAll("rect") 
      .data(dataset) 
      .enter() 
       .append("rect") 
       .attr("width", function (d) { return d.age*10; }) 
       .attr("height", 48) 
       .attr("y", function (d,i) { return i*50; }) 
       .attr("fill", "gray"); 

     canvas.selectAll("text") 
      .data(dataset) 
      .enter() 
       .append("text") 
       .attr("fill", "white") 
       .attr("x", 2) 
       .attr("y", function (d,i) { return i*50 +27; }) 
       .text(function (d) { return d.name + " " + d.age; }); 
    }); 

    </script> 
</body> 
</html>

JSON數據名爲「mydata.json」是這樣的：

[ 
    {"name": "AAA", "age": 10}, 
    {"name": "BBB", "age": 20}, 
    {"name": "CCC", "age": 30} 
]

I a m新的Stackoverflow，並試圖編輯它，但我並不完美。如果您對代碼感到困惑，請隨時告訴我們。我會解釋，因爲我真的想解決這個問題。非常感謝！

感謝您的支持！敏銳地期待你的回覆！

來源

2013-07-22 Counter10000

http://stackoverflow.com/questions/17077931/d3-samples-in-a-microsoft-stack?answertab=active#tab-top –

感謝Adam。那麼它是一個服務器/網頁瀏覽器的問題？由於Web瀏覽器無法讀取本地數據文件（在我的情況下是mydata.json文件）？ – Counter10000

roippi的回答是正確的;上面的鏈接有特定的窗口說明，不應該太棘手。 –

這是瀏覽器中的一項安全功能，稱爲same-origin policy。您可以通過啓動您選擇的瀏覽器的開發工具並查看它在嘗試獲取JSON文件時發生的情況來查看它。

有很多方法可以解決這個問題。如果您可以訪問虛擬主機，請將其放在那裏。否則，請選擇一種方法在本地運行輕量級服務器。人們經常被告知，最簡單的一個是服務於一個index.html文件蟒蛇：

#(in v2.x) 
python -m SimpleHTTPServer 8000 

#(in v3.x) 
python -m http.server 8000

然後瀏覽到本地主機：8000。這在d3 wiki稍詳細解釋。有關更深入的解釋和建議，我建議some reading。

來源

2013-07-22 18:44:43 roippi

感謝Roippi。有趣的是，我也閱讀了交互式數據可視化。但是，跳過設置的一部分，因爲那時候，我認爲它更像是一個生產方面的故事。瞭解一堂課:)我會更仔細地閱讀那部分，並嘗試調整設置。我被困在Microsoft Windows中。所以我想這需要一段時間才能解決問題。但是，我仍然很高興能夠很快得到你的幫助！再次感謝！ – Counter10000

在windows上安裝python是快速和無痛的，不要讓這些阻止你。 – roippi

我會先嚐試python。感謝Roippi！ – Counter10000

如何正確導入數據到d3js

回答

相關問題