D3.js无法加载json文件

Question

I am trying to create a D3.js packed circle diagram . 我正在尝试创建一个D3.js 打包的圆形图。

When I embed the data in the HTML file, it works fine. 当我将数据嵌入HTML文件时，它工作正常。 When I put the data in an external file, I get nothing (blank DOM, no console msgs). 当我将数据放在外部文件中时，我什么也得不到（空白DOM，没有控制台消息）。

If you uncomment the var data declaration and comment out the d3.json (and the corresponding closing parentheses) it works fine. 如果取消注释var数据声明并注释掉d3.json（以及相应的右括号），它可以正常工作。

I can see the "2013 Inf-2.json" file in the browser and it appears well formed (it passes jsonlint validation). 我可以在浏览器中看到“2013 Inf-2.json”文件，它看起来很好（它通过了jsonlint验证）。 It includes everything from the first "{" through/including the last "}". 它包括从第一个“{”到/包括最后一个“}”的所有内容。 Much as the embedded example. 就像嵌入式的例子一样。

I'm running this through httpd (:80) on OSX Mavericks and trying to render the chart in Chrome or Safari. 我在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>

Answer 1

You should change line 你应该换行

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

to 至

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

So you just have to replace "root" with "data" 所以你只需要用“数据”替换“root”

D3.js无法加载json文件

问题描述

1 个解决方案

解决方案1
7 已采纳 2013-12-13 22:37:02

D3.js无法加载json文件

问题描述

1 个解决方案

解决方案1 7 已采纳 2013-12-13 22:37:02

解决方案1
7 已采纳 2013-12-13 22:37:02