d3.json不会在D3 v4中返回我的数据数组 [英] d3.json doesn't return my data array in D3 v4

问题描述

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

  var data = d3.json（url，callback）
  

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

我在这里做错了什么？

---

^{注意：这是一个自行回答的问题，尝试在许多先前问题触及的主题上提供规范Q& A，而不是由API解释（明确）。下面的答案是作为这些问题的一般指导。}

解决方案

TL; DR

d3.json （以及 d3.csv ， d3.tsv etc）不返回已加载/已解析文件的内容。而不是那样，它返回一个与请求相关的对象（警告：lector：这个答案仅适用于D3 v3和v4，但不适用于v5，因为D3 v5使用promises）。

d3.json返回什么？

d3.json 是<$的替代方案之一由D3提供的c $ c> XMLHttpRequest 。根据 API ， d3.json ...

返回一个新请求，以获取指定网址的JSON文件默认的mime类型application / 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 （数据） 

 < 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>< /脚本>  

如何使用d3.json？

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

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

以下是我们的JSON文件的片段：

  d3.json（https://api.myjson.com/bins/k4xqn，function（data）{console .log（data）}） 

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

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

  d3.json（https：// api .myjson.com / bins / k4xqn，callback）函数回调（数据）{console.log（data）}  

 < script src =https://d3js.org/d3.v4.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 (caveat, lector: this answer only applies to D3 v3 and v4, but not to v5, since D3 v5 uses promises).

What does d3.json return?

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:

[{
    "name": "foo",
    "value": 42
}, {
    "name": "bar",
    "value": 12
}, {
    "name": "baz",
    "value": 34
}]

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.myjson.com/bins/k4xqn", 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.myjson.com/bins/k4xqn", 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.myjson.com/bins/k4xqn", 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.myjson.com/bins/k4xqn", callback)

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

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

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