无法在 d3.js 中加载 Json 文件

Question

当我们点击 Circle 时，我正在使用 d3.js 库开发解决方案，它应该被缩放并且数据需要在圆圈内显示。

作为第一步，我试图从 Json 文件中加载数据。

以下是 json 文件的内容，我使用的是 Visual Studio 2012。

我的数据.json

[{"name":"Ravi","age":25},{"name":"aman","age":29}]

.html 文件和 .json 文件都在同一个文件夹中，我仍然收到错误。

线路：5734 错误：无法获取属性“孩子”的值：对象为空或未定义

下面是脚本：

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

    d3.json("mydata.json", function (data) {
        var treemap = d3.layout.treemap()
        .size([500, 500])
        .nodes(data)
        console.log(treemap);

    });

</script>

注意：我只是尝试加载文件并使用布局树图。

谢谢

Answer 1

要更好地了解正在发生的事情，请使用 debugger; + dev console 或添加更多日志记录：

d3.json("mydata.json", function (error, data) {
  console.log(error);
  console.log(data);
    var treemap = d3.layout.treemap()
      .size([500, 500])
      .nodes(data)
    console.log(treemap);
});

使用python -m SimpleHTTPServer 托管文件并导航到127.0.0.1:8000 会在我的计算机上记录以下内容：

null
[{"name":"Ravi","age":25},{"name":"aman","age":29}] 
[[{"name":"Ravi","age":25},{"name":"aman","age":29}]] 

这让我觉得您没有通过服务器访问文件；我会尝试做that。