What is the best way to update d3 charts using - AJAX

I know the OP specified jQuery, but for those Googlers not wanting another framework, there is a native D3 way of doing this, using either request or json:

d3.request(url, function(error, response) {    // Now use response to do some d3 magic});

or

d3.json(url, function(error, response) {    // Now use response to do some d3 magic});

You just need to call your d3 function in your ajax success:

    $.ajax({            type: "POST",            contentType: "application/json; charset=utf-8",            url: 'url to your web servise',            dataType: 'json',            async: true,            data: "{}",             success: function (data) {               var pos_data = data;               div_name = "div.histogram";        draw_histogram(div_name, pos_data);            },            error: function (result) {}    })//The drawing of the histogram has been broken out from the data retrial     // or computation. (In this case the 'Irwin-Hall distribution' computation above)    function draw_histogram(reference, pos_data){        $(reference).empty()        //The drawing code needs to reference a responsive elements dimneions        var width = $(reference).width();        // var width = $(reference).empty().width(); we can chain for effeicanecy as jquery returns jquery.        // var height = 230;  // We don't want the height to be responsive.        var margin = {top: 10, right: 30, bottom: 40, left: 30},        // width = 960 - margin.left - margin.right,        height = 270 - margin.top - margin.bottom;        var histogram = d3.layout.histogram() (pos_data);        //var neg_histogram = d3.layout.histogram()(neg_data);        var x = d3.scale.ordinal()            .domain(histogram.map(function(d) { return d.x; }))            .rangeRoundBands([0, width]);        var xAxis = d3.svg.axis()        .scale(x)        .orient("bottom");        var y = d3.scale.linear()            .domain([0, d3.max(histogram.map(function(d) { return d.y; }))])            .range([0, height]);        //var ny = d3.scale.linear()        //    .domain([0, d3.max(neg_histogram.map(function(d) { return d.y; }))])        //    .range([0, height]);        var svg = d3.select(reference).append("svg")            .attr("width", width)            .attr("height", height + 20);        svg.selectAll("rect")            .data(histogram)          .enter().append("rect")            .attr("width", x.rangeBand())            .attr("x", function(d) { return x(d.x); })            .attr("y", function(d) { return height - y(d.y); })            .attr("height", function(d) { return y(d.y); });        svg.append("line")            .attr("x1", 0)            .attr("x2", width)            .attr("y1", height)            .attr("y2", height);        svg.append("g")            .attr("class", "x axis")            .attr("transform", "translate(0," + (height)  + ")")            .call(xAxis);    };    //Bind the window resize to the draw method.    //A simple bind example is    //A better idom for binding with resize is to debounce    var debounce = function(fn, timeout)     {      var timeoutID = -1;      return function() {        if (timeoutID > -1) {          window.clearTimeout(timeoutID);        }        timeoutID = window.setTimeout(fn, timeout);      }    };    var debounced_draw = debounce(function() {      draw_histogram(div_name, pos_data);    }, 125);    $(window).resize(debounced_draw);

The idea of any AJAX request is to send request to a page that will generate a HTML markup or data that can be used by client. When you want your dropdown to update via AJAX, make sure the server sends the list of drop-down items as a XML/JSON or HTML markup and your caller function places the HTML at the appropriate place.

If you want real-time updating, consider asking the server for data periodically and then matching the data against your last copy and see if new data has arrived. If it has, re-render.

To see how to use AJAX to dynamically update content based in real time check out my Dynamic-table github project

Host the project on your localserver. (Can be anything WAMP/LAMP/Tomcat whatever) and open sample.html

Now, change the content in datafile.json. You will immediately see the change in the rendered on the table.

You want to achieve the same functionality, but with d3 charts. But the idea of how I fetch the content and process it periodically remains the same.

Hope that helped.