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

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

d3.json

（以及

d3.csv

，

d3.tsv

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

d3.json返回什么？

d3.json

是

XMLHttpRequest

D3提供的替代方法之一。根据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>