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文件

回答

相关问题