什么是使用更新D3图表的最好方式 - AJAX [英] What is the best way to update d3 charts using - AJAX

问题描述

我已经学会 D3 的几个街区。我做了一个负责任的D3直方图与jQuery的帮助。

I've learned few blocks of d3. And I've made a responsive d3 histogram with the help of jquery.

现在，我想向前走了一下就用ajax更新D3图表。

Now that I wanted to go a bit forward on updating d3 charts using ajax.

我刚刚踏进jQuery的。

I've just stepped into jquery.

和认识的几个位Ajax如何工作。

And know a few bits how ajax works.

在搜索了很长时间，但我不能得到任何工作的例子在官方网站D3或其他任何地方。

Searching for a long time but I couldn't get any working example on the official d3 site or anywhere else.

任何帮助将是富有成果的，我得到通过AJAX更新D3图表的基本模块。

Any help will be fruitful for me to get on the basic blocks of updating d3 charts through ajax.

在此先感谢！

推荐答案

您只需要打电话给你的D3功能在阿贾克斯成功：

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

这篇关于什么是使用更新D3图表的最好方式 - AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！