如何将外部JSON文件加载到D3?

时间:2016-03-17 03:19:49

标签: javascript json d3.js

我在将外部JSON文件data.json加载到此D3.js脚本时遇到问题。我不知道这是否重要,但我正在使用Python 3和0.0.0.0:8888运行服务器。这是困扰我的问题:

  • 当我使用JSON数据明确定义变量并使用console.log时,Chrome Developer控制台会显示脚本正在输出对象。
  • 当我使用d3.json加载包含对象数组的外部JSON文件时,Chrome Developer控制台会输出undefined

JSON文件 - data.json

[{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},]

网站 - index.html

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data;
d3.json("data.json", function(d) {
    data = d;
});
console.log(data);
</script>
</html>

运行时,控制台输出undefined,而不是输出data.json文件中sotred内部的JSON对象的内容。

但是,第二种方法完全正常,控制台输出[Object],表明已成功检测到JSON。

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data = [{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},];
console.log(data);
</script>
</html>

我在这里做错了什么?我已经尝试调整JSON对象,将console.log放在D3函数中,但似乎没有任何效果。

编辑:奇怪的是,当我将JSON文件更改为此文件时,它可以完美运行:

{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}

3 个答案:

答案 0 :(得分:0)

您的数据未定义,因为console.log函数在d3函数之前被触发。

d3异步加载文件。

试试这个

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    var data;
    d3.json("data.json", function(d) {
    data = d;
    console.log(data);
 });
</script>
</html>

答案 1 :(得分:0)

啊,所以我玩了JSON文件,发现了问题。好像我在第一个对象之后添加了一个额外的,,因此D3不喜欢额外的逗号。将JSON文件更改为此修复它:

{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}

答案 2 :(得分:0)

在你的data.json文件中, [{&#34; name&#34;:&#34; Computer Science A&#34;,&#34;得分&#34;:[1,2,3,4,5]},]

你的结尾有一个逗号。

如果删除它,它应该可以正常工作 [{&#34; name&#34;:&#34; Computer Science A&#34;,&#34;得分&#34;:[1,2,3,4,5]}]

<html>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data;
d3.json("data.json", function(d) {
data = d;
console.log(data);
});
</script>
</html>