How do I post parameter on d3.json?

问题:

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) {
  }
 });

回答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.

回答2:

You could also try this:

    d3.json(url,function(error, data) {
       ...
    })
   .header("Content-Type","application/json")
   .send("POST", JSON.stringify({year: "2012", customer: "type1"}));

回答3:

Using d3-fetch in D3v5, it looks like

        d3.json(url, {
            method: 'POST',
            headers: {
                "Content-type": "application/json; charset=UTF-8"
            },
            body: JSON.stringify(query)
        });

Where url is the URL and query is the content to post.

I found the answer in this question.

回答4:

If you want to make a request like an HTML form (using query parameters), then you would do:

d3.request("/path/to/resource")
.header("X-Requested-With", "XMLHttpRequest")
.header("Content-Type", "application/x-www-form-urlencoded")
.post("a=2&b=3", callback);

See the docs here: d3-request docs

If you want to convert a simple object to a query parameter string, then you can use the following function:

function obj2Params(params){
  var str = "";
  var amp = "";
  for(var p in params){
    if(params.hasOwnProperty(p)) {
        str += amp + encodeURIComponent(p) + "=" + encodeURIComponent(params[p]);
        amp = "&";
    }
  }
  return str;
}

回答5:

If you use struts you can define the url and the parameter:

<s:url action="jsondatatreeaction" var="jsonsearchTag"
    namespace="/data">
    <s:param name="searchType" value="%{searchType}"></s:param>
</s:url>

. . . d3.json('${jsonsearchTag}', function(error, flare) { ... } . . .