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等)不返回加载/解析的文件的内容.而不是那样,它返回一个与请求相关的对象(告诫者,lector:在D3 v5中,它使用promises,返回的值不同,见下文).

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>