d3.json 方法不返回我的数据数组 [英] d3.json method doesn't return my data array
问题描述
我正在使用 d3.json 加载包含我的数据的 JSON 文件，如下所示:
var data = d3.json(url, callback)如果我执行 console.log(data) 我可以看到 data 既不是空也不是 null.但是，它似乎不包含我的数据数组，而是包含其他内容.
我在这里做错了什么?
<小时>注意:这是一个自我回答的问题，试图在之前的许多问题都涉及到并且 API 没有(清楚地)解释的主题.下面的答案是作为对这些问题的一般指导而编写的.
TL;DR
d3.json(以及 d3.csv、d3.tsv 等)不返回加载/解析的内容文件.取而代之的是，它返回与 D3 v4 或更低版本中的请求相关的对象，以及 D3 v5 或更高版本中的承诺.
d3.json 返回什么?(v4 或更低版本)
d3.json 是 D3 提供的 XMLHttpRequest 的替代方案之一.根据 API，d3.json...
返回一个新请求，以使用默认的 mime 类型 application/json 在指定的 url 处获取 JSON 文件.
...我们可以同意，这不是特别清楚.因此，您可能认为可以使用 var data = d3.json(url, callback) 返回加载的数据，但这是不正确的.d3.json 返回的是一个与请求相关联的 object(不是数组).来看看吧.
我在一个文件中有这个 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 数据 = 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){//这里使用数据...});这是我们的 JSON 文件的片段:
d3.json("https://api.npoint.io/5b22a0474c99d3049d2e", function(data) {控制台日志(数据)})<script src="https://d3js.org/d3.v4.min.js"></script>您还可以调用另一个函数:数据将作为第一个参数传递.这是一个演示:
d3.json("https://api.npoint.io/5b22a0474c99d3049d2e", callback)函数回调(数据){控制台日志(数据)}<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 代码段控制台.
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 or higher.
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 or higher)
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>
Check it in your browser's console, not the Stack snippet console.
这篇关于d3.json 方法不返回我的数据数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
