d3.json 方法不返回我的数据数组

IT技术 javascript json d3.js xmlhttprequest es6-promise
2021-01-20 03:50:11

我正在使用d3.json加载包含我的数据的 JSON 文件,如下所示:

var data = d3.json(url, callback)

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

我在这里做错了什么?


注意:这是一个自我回答的问题,试图提供一个“规范”的问答,这个主题已经被许多以前的问题所触及,但 API 没有(清楚地)解释过。下面的答案是作为对这些问题的一般指导而编写的。

1个回答

TL; 博士

d3.json(以及d3.csvd3.tsv等)不返回加载/解析的文件的内容。取而代之的是,它返回与 D3 v4 或更低版本中的请求相关的对象,以及 D3 v5 或更高版本中的Promise。

d3.json 返回什么?(v4 或更低版本)

d3.jsonXMLHttpRequestD3 提供的替代方案之一根据APId3.json...

返回一个新请求,以使用默认的 mime 类型 application/json 在指定的 url 处获取 JSON 文件。

......我们可以同意,这不是特别清楚。正因为如此,你可能认为你可以返回加载的数据使用var data = d3.json(url, callback),但这是不正确。什么d3.json返回是一个对象(未数组),与请求相关联。让我们来看看它。

我在一个文件中有这个 JSON:

{"foo": "42"}

如果我们使用d3.json您在问题中使用的方式会怎样?点击“运行代码片段”查看:

var data = d3.json("https://api.npoint.io/5b22a0474c99d3049d2e", 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.npoint.io/5b22a0474c99d3049d2e", 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.npoint.io/5b22a0474c99d3049d2e", function(data) {
  console.log(data)
})
<script src="https://d3js.org/d3.v4.min.js"></script>

您还可以调用另一个函数:数据将作为第一个参数传递。这是一个演示:

d3.json("https://api.npoint.io/5b22a0474c99d3049d2e", callback)

function callback(data) {
  console.log(data)
}
<script src="https://d3js.org/d3.v4.min.js"></script>

d3.json 返回什么?(v5 或更高版本)

在D3 V5, d3.json以及d3.csvd3.tsv等)返回一个Promise:

var data = d3.json("https://api.npoint.io/5b22a0474c99d3049d2e");

console.log(data)
<script src="https://d3js.org/d3.v5.min.js"></script>

在浏览器的控制台中检查它,而不是 Stack 代码段控制台。