d3.json没有在D3 v4中返回我的数据数组

Question

我d3.json用来加载包含我的数据的JSON文件，如下所示：

var data = d3.json(url, callback)

如果我做一个，console.log(data)我可以看到data既不是空的也不是null。但是，它似乎不包含我的数据数组，而是包含其他内容。

我在这里做错了什么？

注意：这是一个自我回答的问题，试图对以前很多问题都涉及到且API未明确解释的主题提供“规范”的问答。以下答案是对这些问题的一般指导。

Answer 1

TL; DR

d3.json（以及d3.csv，d3.tsv等）不返回加载/解析的文件的内容。取而代之的是，它返回与请求相关的对象（caveat，lector：在使用Promise的D3
v5中，返回的值不同，请参见下文）。

d3.json返回什么？

d3.json是XMLHttpRequestD3提供的替代方法之一。根据API，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正如您在几个在线示例中看到的那样，使用加载数据的正确方法是使用其回调：

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>