D3.js無法加載json文件

我正在嘗試創建一個D3.js packed circle diagram。D3.js無法加載json文件

當我將數據嵌入HTML文件時，它工作正常。當我把數據放在外部文件中時，我什麼都沒有（空白的DOM，沒有控制檯信息）。

如果您取消註釋var數據聲明並註釋掉d3.json（以及相應的右括號），它可以正常工作。

我可以在瀏覽器中看到「2013 Inf-2.json」文件，它看起來很合適（它通過jsonlint驗證）。它包括從第一個「{」到/包括最後一個「}」的所有內容。就像嵌入式示例一樣。

我在OSX Mavericks上通過httpd（：80）運行此操作，並嘗試在Chrome或Safari中呈現圖表。

<!DOCTYPE html> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <script type="text/javascript" src="./d3.v3.min.js"></script> 
    </head> 
<body> 
<div id="chart2"></div> 
<script type="text/javascript"> 
var w = 640, h = 480; 
/* 
var data ={ 
"name" : "root", 
    "children" : [ 
    { 
    "name":"URIN TRACT INFECTION NOS", 
    "size":12196 
    }, 
    { 
    "name":"ACUTE PHARYNGITIS", 
    "size":6679 
    }, 
    { 
    "name":"PNEUMONIA ORGANISM NOS", 
    "size":6452 
    }, 
    { 
    "name":"BRONCHITIS NOS", 
    "size":2636 
    }, 
    { 
    "name":"CELLULITIS OF LEG", 
    "size":2348 
    }, 
    { 
    "name":"OBSTR CHRONIC BRONCHITIS W (ACUTE) EXACERBATION", 
    "size":2203 
    } 
] 
} 
*/ 
var data = d3.json("2013 Inf-2.json", function(error, root) { 

var canvas = d3.select("#chart2") 
     .append("svg:svg") 
     .attr("width", w) 
     .attr("height", h); 

var nodes = d3.layout.pack() 
     .value(function(d) { return d.size; }) 
     .size([w, h]) 
     .nodes(data); 

    // Get rid of root node 
    nodes.shift(); 

    canvas.selectAll("circles") 
     .data(nodes) 
     .enter().append("svg:circle") 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .attr("r", function(d) { return d.r; }) 
     .attr("fill", "green") 
     .attr("stroke", "grey"); 

}); 
</script> 
</html>

來源

2013-12-13 Colin

你應該改變線

var data = d3.json("2013 Inf-2.json", function(error, root) {

到

var data = d3.json("2013 Inf-2.json", function(error, data) {

所以我們必須用「數據」來代替「根」

來源

2013-12-13 22:37:02 cuckovic

是的，我已經厭倦了這一點，但仍然得到一個空白頁面，沒有控制檯味精。「API參考」似乎表示「回調被調用了兩個參數：錯誤（如果有的話）和解析的JSON。」 https://github.com/mbostock/d3/wiki/Requests#wiki-d3_json – Colin

它正在工作，但你必須把它放在網絡服務器上。它也可以這樣工作： var data = d3.json（「2013 Inf-2.json」，function（error，data）{ – cuckovic

在Chrome中它只適用於從Web服務器加載它的作品。如果你從文件系統打開它，所以你不需要服務器，試着用Firefox打開 – cuckovic

D3.js無法加載json文件

回答

相關問題