d3.json方法不返回我的数据数组 [英] d3.json method doesn't return my data array

问题描述

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

  var data = d3.json（URL，回调）
  

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

我在这里做什么错了？

---

^{注意：这是一个自我回答的问题，要针对先前已被许多先前问题所涉及但未（明确）API解释过的主题提供规范的问答。下面的答案是对这些问题的一般指导。}

解决方案

TL; DR

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

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

d3.json 是 XMLHttpRequest 由D3提供。根据 API ， d3.json ...

返回一个新请求，以默认的mime类型在指定的url上获取JSON文件application / 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>  

在控制台中可以看到，我们有一个像这样的对象：

  {标头：ƒ，mimeType：ƒ，responseType：ƒ，超时：ƒ，用户：ƒ，...} 
  

不是我们的数据数组。

如果使用函数，也会发生相同的事情：

  function getData（）{
 return d3.json（ https://api.npoint.io/5b22a0474c99d3049d2e，function（）{}）
} 
 
 var data = getData（）
 
 console.log（data） 

 <脚本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，函数（）{}）； 
 
 console.log（data） 

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

如何使用d3.json？

使用 d3.json <加载数据的正确方法，如您在几个在线示例中所见，正在使用其回调：

  d3.json（url，function（data ）{
 //在这里使用数据... 
}）; 
  

这是我们的JSON文件的代码段：

  d3.json（ https://api.npoint.io/5b22a0474c99d3049d2e，函数（数据）{
 console.log（数据）
}） 

 < script src = https ：//d3js.org/d3.v4.min.js>< / script>  

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

  d3.json（ https://api.npoint.io / 5b22a0474c99d3049d2e，回调）
 
函数回调（数据）{
 console.log（data）
}  

< pre class = snippet-code-html lang-html prettyprint-override> < script src = https://d3js.org/d3.v4.min.js>< /脚本>

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>  

I'm using d3.json to load a JSON file containing my data, like this:

var data = d3.json(url, callback)

If I do a console.log(data) I can see that data is neither empty nor null. However, it doesn't seem to contain my data array, but something else instead.

What am I doing wrong here?

---

^{Note: this is a self-answered question, trying to provide a "canonical" Q&A on a subject that has been touched on by many previous questions and not (clearly) explained by the API. The answer below was written as a general guidance to those questions.}

解决方案

TL;DR

d3.json (as well as d3.csv, d3.tsv etc) does not return the content of the loaded/parsed file. Instead of that, it returns an object related to the request in D3 v4 or lower, and a promise in D3 v5.

What does d3.json return? (v4 or lower)

d3.json is one of the alternatives to XMLHttpRequest provided by D3. According to the API, d3.json...

Returns a new request to get the JSON file at the specified url with the default mime type application/json.

... which, we can agree, is not particularly clear. Because of that, you probably thought that you could return the loaded data using var data = d3.json(url, callback), but that's incorrect. What d3.json returns is an object (not an array), associated with the request. Let's see it.

I have this JSON in a file:

{"foo": "42"}

What happens if we use d3.json the way you used it in your question? Click "run code snippet" to see:

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

console.log(data)

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

As you can see in the console, we have an object like this:

{header: ƒ, mimeType: ƒ, responseType: ƒ, timeout: ƒ, user: ƒ, …}

Well, this is not our data array.

The same thing happens if you use a function:

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>

Also, it's worth mentioning that the same thing happens with d3.csv, d3.tsv and the other request methods:

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>

How to use d3.json?

The correct way to load the data with d3.json, as you can see in several online examples, is using its callback:

d3.json(url, function(data){
    //use data here...
});

And here is the snippet with our JSON file:

d3.json("https://api.npoint.io/5b22a0474c99d3049d2e", function(data) {
  console.log(data)
})

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

You can also call another function: the data will be passed as the first argument. Here is a demo:

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

function callback(data) {
  console.log(data)
}

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

What does d3.json return? (v5)

In D3 v5, d3.json (as well as d3.csv, d3.tsv etc) returns a promise:

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

console.log(data)

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

这篇关于d3.json方法不返回我的数据数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！