How do I post parameter on d3.json?

Question

I'm using d3.json to get a dynamic data.

d3.json("/myweb/totalQtyService.do", function(json) {

    drawChart(json);
});

How do I post parameter on d3.json? i.e.

data : { year: "2012", customer: "type1“ }

Any idea pass those parameter on post? not url parameter /myweb/totalQtyService.do?year=2012&customer=type1

I tried such below, but couldn't make it work. because the data structure so different

d3.json => [Object, Object, Object, Object]

$.ajax => {entity_name: "ACTIVA"entity_tar_val: 350entity_val: 400level: 1_proto_: Object},...

$.ajax({ 
  type: "POST", 
  url: url,

  // parameter here
  data : {year: "2012", customer: "type1“},
  success: function(json){
       // console.log(json);
       **drawChart(json);**
  } ,
  error:function (request, err, ex) {
  }
 });

Answer 1

NOTE: This answer applies to an older version of d3.json, see JoshuaTaylor's comment below.

NOTE for d3v5: The original answer is increasingly out of date. d3 v5 uses the fetch API and promises rather than XMLHttpRequest.

You can set the method of the http request in the second parameter of any of the d3-fetch data getting functions e.g.

d3.csv("/path/to/file.csv", { method: 'POST' })
    .then((data)=>{ /* do something with 'data' */ });

---

d3.json is a convenience method wrapping d3.xhr; it's hardwired to make GET requests.

If you want to POST you can use d3.xhr directly.

Something like this:

d3.xhr(url)
    .header("Content-Type", "application/json")
    .post(
        JSON.stringify({year: "2012", customer: "type1"}),
        function(err, rawData){
            var data = JSON.parse(rawData);
            console.log("got response", data);
        }
    );

Because no callback is specified in creation of the request object it's not sent immediately. Once received the JSON response can be parsed in the standard JavaScript way i.e. JSON.parse(data) The documentation for d3.xhr is here.