Question

我在将外部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]}

Answer 1

您的数据未定义，因为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>

Answer 2

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

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

Answer 3

在你的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>

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

3 个答案: