使用AJAX更新d3圖表的最佳方式是什麼？AJAX

Question

我學到了幾塊d3。而且我在jquery的幫助下製作了一個響應式d3直方圖。

現在我想用ajax更新d3圖表。

我剛剛走進jQuery。

並且瞭解ajax如何工作。

尋找很長一段時間，但我無法在官方d3網站或任何其他地方得到任何工作示例。

任何幫助都將成爲我通過ajax更新d3圖表的基本模塊。

在此先感謝！

Answer 1

你只需要打電話給你D3的功能在你的Ajax成功：

$.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); 

Answer 2

任何AJAX請求的想法是將請求發送到將生成HTML標記或客戶端可以使用的數據的頁面。當您希望通過AJAX更新下拉列表時，請確保服務器將下拉列表的列表作爲XML/JSON或HTML標記發送，並且調用方函數將HTML放在適當的位置。

如果要實時更新，請考慮定期向服務器詢問數據，然後將數據與最後一個副本進行匹配，看看是否有新數據到達。如果有，重新渲染。

要了解如何使用AJAX來動態更新基於實時檢查出我Dynamic-table github project

主機上你的LocalServer的項目內容。 （可以是任何WAMP/LAMP/Tomcat）並打開sample.html

現在，更改datafile.json中的內容。您將立即在桌面上看到渲染中的變化。

您想實現相同的功能，但需要使用d3圖表。但是，我如何獲取內容並定期處理內容的想法依然如此。

希望有幫助。

Answer 3

我知道OP指定的jQuery的，但對於那些Google員工不希望另一個框架，有這樣做的原生D3的方式，使用任一request或json：

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

或

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