我正在使用d3.json
加载包含我的数据的JSON文件,如下所示:
var data = d3.json(url, callback)
如果我执行了console.log(data)
我可以看到data
既不是空的也不是null
。但是,它似乎不包含我的数据数组,而是包含其他内容。
我在这里做错了什么?
注意:这是一个自我回答的问题,trying to provide a "canonical" Q&A on a subject that has been touched on by many previous questions而不是(明确)由API解释。下面的答案是作为这些问题的一般指导。
答案 0 :(得分:5)
d3.json
(以及d3.csv
,d3.tsv
等)不会返回已加载/已解析文件的内容。而不是那样,它返回一个与请求相关的对象(告诫者,lector:在D3 v5中,它使用promises,返回的值不同,见下文)。
d3.json
是D3提供的XMLHttpRequest
的替代方案之一。根据{{3}},d3.json
...
返回一个新请求,使用默认的mime类型application / json在指定的url上获取JSON文件。
......我们可以同意,这一点并不是特别清楚。因此,您可能认为可以使用var data = d3.json(url, callback)
返回加载的数据,但这是不正确的。 d3.json
返回的是与请求关联的对象(不是数组)。我们来看看吧。
我在文件中有这个JSON:
[{
"name": "foo",
"value": 42
}, {
"name": "bar",
"value": 12
}, {
"name": "baz",
"value": 34
}]
如果我们在您的问题中使用d3.json
的方式会怎样?点击“运行代码段”查看:
var data = d3.json("https://api.myjson.com/bins/k4xqn", function() {});
console.log(data)
<script src="https://d3js.org/d3.v4.min.js"></script>
正如您在控制台中看到的,我们有一个这样的对象:
{header: ƒ, mimeType: ƒ, responseType: ƒ, timeout: ƒ, user: ƒ, …}
嗯,这不是我们的数据阵列。
如果你使用一个函数会发生同样的事情:
function getData() {
return d3.json("https://api.myjson.com/bins/k4xqn", function() {})
}
var data = getData()
console.log(data)
<script src="https://d3js.org/d3.v4.min.js"></script>
此外,值得一提的是,d3.csv
,d3.tsv
以及其他请求方法也会发生同样的事情:
var data = d3.csv("https://www.ibm.com/support/knowledgecenter/SVU13_7.2.1/com.ibm.ismsaas.doc/reference/AssetsImportCompleteSample.csv", function() {});
console.log(data)
<script src="https://d3js.org/d3.v4.min.js"></script>
正如您在几个在线示例中所看到的,使用d3.json
加载数据的正确方法是使用其回调:
d3.json(url, function(data){
//use data here...
});
以下是我们的JSON文件的片段:
d3.json("https://api.myjson.com/bins/k4xqn", function(data) {
console.log(data)
})
<script src="https://d3js.org/d3.v4.min.js"></script>
您还可以调用另一个函数:数据将作为第一个参数传递。这是一个演示:
d3.json("https://api.myjson.com/bins/k4xqn", callback)
function callback(data) {
console.log(data)
}
<script src="https://d3js.org/d3.v4.min.js"></script>
D3 v5
在D3 v5中,d3.json
(以及d3.csv
,d3.tsv
等)会返回一个承诺:
var data = d3.json("https://api.myjson.com/bins/k4xqn");
console.log(data)
<script src="https://d3js.org/d3.v5.min.js"></script>