d3 javascript：讀取json文件

我想在d3js中編寫一段代碼片段，它將讀取一個json文件，並根據json文件的內容顯示一個簡單的條形圖。我的JSON文件，mydata.json是：d3 javascript：讀取json文件

[ 
    {「name」: 「Apollo_Diomedes」, 「age」: 300}, 
    {「name」: 「Bjorn_the_Fellhanded」, 「age」: 900}, 
    {「name」: 「Jonah_Orion」, 「age」: 500} 
]

d3js代碼片段，從index.html：

<body> 
<script> 
d3.json("mydata.json", function(data) { 

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

    canvas.selectAll("rect") 
     .data(data) 
     .enter() 
      .append("rect") 
      .attr("width", function(x) { return x.age; }) 
      .attr("height", 45) 
      .attr("y", function(x, i) { return i * 50; }) 
      .attr("fill", "blue") 
    }); 
</script> 
</body>

我使用D3 V4： <script src="http://d3js.org/d3.v4.js"></script>。

我試過直接打開index.html文件，並打開本地服務器並按here導航到localhost:8080;都只是給我一個空白的屏幕。 index.html和mydata.json都保存在我桌面上的相同文件夾中。

對於那些有興趣的人來說，它實際上是this略有過時的YouTube教程;它運行d3 v3。

P.S.我可以從CSV中讀取信息，但不能讀取json。

來源

2017-02-22 AndreyIto

你有一個問題解析JSON數據問題出在你的JSON格式的數據上，而不是你如何調用它，我只是替換你的「with」，它工作得很好 '''name'：「Apollo_Diomedes」，「age」：300} ， {「name」：「Bjorn_the_Fellhanded」，「age」：900}， {「name」：「Jonah_Orion」，「age」：500} ] –

這聽起來像你有解析JSON數據的問題。嘗試更換您的引號到英語的人（「）。

而在一般情況下，經常檢查您的Web瀏覽器的控制檯日誌。我敢肯定，你會有些誤差印在那裏。

來源

2017-02-26 15:24:00

d3 javascript：讀取json文件

回答

相關問題