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

Question

我正在使用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 没有（清楚地）解释。下面的答案是对这些问题的一般指导。}

Answer 1

TL;DR

d3.json（以及d3.csv、d3.tsv 等）不返回加载/解析文件的内容。取而代之的是，它返回与 D3 v4 或更低版本中的请求相关的对象，以及 D3 v5 或更高版本中的承诺。

d3.json 返回什么？ （v4 或更低版本）

d3.json 是 D3 提供的 XMLHttpRequest 的替代品之一。根据API、d3.json...

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

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

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

{"foo": "42"}

如果我们按照您在问题中使用的方式使用d3.json，会发生什么情况？点击“运行代码sn-p”查看：

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 文件的 sn-p：

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.csv、d3.tsv 等）返回一个承诺：

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

console.log(data)

<script src="https://d3js.org/d3.v5.min.js"></script>

在浏览器的控制台中检查它，而不是 Stack sn-p 控制台。