How to load data using XHR in D3

Question

I am experimenting with D3 on my localhost. I would like to load data to be visualized from an external source on the Internet.

I am looking for instruction/examples of how to how to load data using XHR in D3 (there is documentation here, but it does not suffice for me, I am looking for code snippets https://github.com/mbostock/d3/wiki/Requests)

I have tried the following and it does not work for me:

d3.xhr("http://example.org/json-test.json", function(data){

    alert(data); //no data is returned

});

Thanks

score 3 · Answer 1 · answered Aug 18 '13 at 16:41

3

In the latest version of D3, the first argument of the callback is the error, if any, and the second the data. No data in the first argument (which you're checking) suggests that the request was successful. See the documentation for more details.

answered Aug 18 '13 at 16:41

Lars Kotthoff

107,425
16
204
204

I have the same problem. `d3.xhr("http://xxx.xxx.x.xx/aaa/bbb/?format=json", function(error, nodes){` shows me undefined(nodes).The url works because if I open this on browser it shows me the json – Don Nov 14 '13 at 09:39
Yes. An alert shows me:`[object XMLHttpRequest]`. I also do error.toSource and shows me `({})` – Don Nov 14 '13 at 09:48
You may want to ask a separate question about this, but this is almost certainly something specific to your setup. – Lars Kotthoff Nov 14 '13 at 09:50
I also believe that, but I don't handle the setup, so now burn some neurons :D – Don Nov 14 '13 at 09:57

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

update to the update:

The d3-request module has been superseded by the d3-fetch module. It handles JSON, CSV, TSV and plain text.

update:

Just in case someone arrives here looking for xhr in d3: this functionality is now supported in the d3-request module.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 24 '18 at 01:14

fearless_fool

33,645
23
135
217

score 0 · Answer 3 · answered Nov 04 '16 at 10:42

Your function callback should look like this

                                                       v---- missing param
d3.xhr("http://example.org/json-test.json", function(error, data){
    // code...
});

That is the typical callback structure in javascript/node.js, error first then data.

How to load data using XHR in D3

3 Answers3

update to the update:

update:

Linked