D3.js 无法加载 json 文件答案

【问题标题】：D3.js can't load json fileD3.js 无法加载 json 文件
【发布时间】：2013-12-13 22:19:46
【问题描述】：

我正在尝试创建一个 D3.js packed circle diagram。

当我将数据嵌入 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>

【问题讨论】：

标签： javascript json apache d3.js circle-pack

【解决方案1】：

你应该换行

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

到

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

所以你只需要将“root”替换为“data”

【讨论】：

是的，我已经厌倦了这个，但仍然得到一个空白页面并且没有控制台消息。 API 参考似乎说“使用两个参数调用回调：错误（如果有）和解析的 JSON。” github.com/mbostock/d3/wiki/Requests#wiki-d3_json
它可以工作，但你必须把它放在网络服务器上。它也可以这样工作： var data = d3.json("2013 Inf-2.json", function(error, data) {
顺便说一句。在 Chrome 中，它仅在您从 Web 服务器加载时才有效。在 Firefox 中，如果您从文件系统打开它，它就可以工作，因此您不需要服务器。尝试使用 Firefox 打开。
HTML 文件（包含 javascript）和“2013 Inf-2.json”都在网络服务器的同一个子目录中。我正在使用 htt://localhost/myfile.html 加载页面。在 Chrome 和 Safari 中，使用 d3.json 时我得到一个空白页面。但是当我使用嵌入在 HTML 中的 json 数据时，它可以工作。这是一个奇怪的问题...
好的，它必须是本地的。感谢您的测试。