How to add a global listener to d3.xhr calls

Question

Is there any global listeners we can add for d3.xhr calls like what we have in ExtJS. Ext.Ajax.on("beforerequest", function(conn, options, eOpts){)};

I tried using 'on' as specified in https://github.com/mbostock/d3/wiki/Requests#on

while trying

    d3.xhr.on("beforesend", function(request){
        console.log("inside on");
    });

I am getting following error. Uncaught TypeError: d3.xhr.on is not a function

while trying below code

    d3.xhr(url, callback).on("beforesend", function(request){
        console.log("inside on");
    });

following error is thrown. Uncaught TypeError: Cannot read property 'on' of undefined

Do I have to do anything special to enable the listeners ?

Thanks in advance.

I don't believe `d3` offers a global hook for ajax requests. The `xhr` object you are playing with is only for one request. That said, you do have straight javascript [options](http://stackoverflow.com/questions/5202296/add-a-hook-to-all-ajax-requests-on-a-page) — Mark, Jul 30 '15 at 13:13
I always use the convenience methods so I'm not familiar with the sequence of events with xhr but, reading the document you linked to I guess it would be something similar to: `d3.xhr(url).get().on("beforesend.test", function(request){ console.log("inside on")}).on("load", callback);` it's very clear in the documentation that you can't use `.on` if you specify a callback in `d3.xhr` or `xhr.get` — Cool Blue, Jul 30 '15 at 13:25

score 1 · Answer 1 · answered Jul 30 '15 at 16:17

You don't need to do anything special, but you have to use the long form with .get() to use the .on() handlers. That is, you can't provide the callback function as the second argument to d3.xhr():

d3.xhr("http://www.example.com") // note no callback function!
.on("beforesend", function(request){
    console.log("inside on");
})
.get(function(error, data) {
    console.log(error, data);
});

Complete demo here. Also see this example.

How to add a global listener to d3.xhr calls

1 Answers1