d3.js d3.xhr(rpcUrl).post appears to be failing to pass json data object

Question

Background: I'm attempting to use d3 to create a choropleth as demonstrated here: http://bl.ocks.org/mbostock/4060606

My data is coming from a json-rpc api.

var rpcUrl = "http://localhost:3001/rpc/json";

var rpcData = '{"params": {}, "jsonrpc": "2.0", "method": "foo.method", "id": "bar"}';

console.log(d3.xhr(rpcUrl).post(rpcData, function(error, data){
    console.log(error);
    console.log(data);
}));

I'm getting the responseText:

responseText: "{"jsonrpc":"2.0","error":{"code":"bad_request","message":"JSON RPC requires a 'method' field"}}"

My method is obviously there in rpcData, so it appears I'm not actually providing the object at all. I suspect my trouble is misunderstanding of how d3.xhr is called. Any clues?

Note: if you are looking at the background info, you'll note that d3.xhr(url).post() is intended to be called using queue.js. I'm providing the simplified call above to avoid any confusion as to the source of the problem.

Answer 1

I ran into the same problem of d3.xhr.post seemingly not sending any post data. Setting the content-type header information to application/json fixed it for me. Here is your updated example:

var rpcUrl = "http://localhost:3001/rpc/json";
var rpcData = '{"params": {}, "jsonrpc": "2.0", "method": "foo.method", "id": "bar"}';
console.log(d3.xhr(rpcUrl)
  .header("Content-Type", "application/json")
  .post(rpcData, function(error, data) {
     console.log(error);
     console.log(data);
   })
);