Django + Jquery + Ajax + D3 不起作用

Question

我目前正在使用 django 框架和 Web 开发 Web UI 我正在使用 d3 + jquery。问题是我可以单独使用所有代码模块，但它们不能一起使用。

我在网页上有一个 D3 饼图，我使用 jquery 和 jquery/ajax 来提高它的可用性并更改图形中显示的当前数据。过程如下：

我点击网络上的一个按钮，它创建了一个对服务器的 ajax 调用，django 中的数据库 return 一些值并将它们转换为 json。我发回这些数据并尝试使用新的一组值更新 D3 图表。

我可以使用一些固定数据，我在 d3 中进行了硬编码，它显示饼图并随 jquery 事件变化。如果我在 view.py 中对它们进行硬编码并将它们作为 get 请愿书的响应发送，浏览器中的 js 控制台会显示它们是一个 json 对象，但 D3 不会获取它们。就像我在 jquery 代码中硬编码 json_object（都相同 copied_pasted）一样，但这次它起作用了。所以数据结构是正确的，请求和响应有效，但完整的流程不正确。

D3代码：

function setupGraph() { 
    nv.addGraph(function() {
        var chart = nv.models.pieChart();
        chart.margin({top: 30, right: 60, bottom: 20, left: 60});
        var datum = data_piechart[0].values;

    chart.tooltipContent(function(key, y, e, graph) {
            var x = String(key);
              var y =  String(y);

              tooltip_str = '<center><b>'+x+'</b></center>' + y;
              return tooltip_str;
              });
        chart.showLabels(true);

            chart.donut(false);

    chart.showLegend(true);




        chart
            .x(function(d) { return d.label })
            .y(function(d) { return d.value });

        chart.width(450);

        chart.height(450);


            d3.select('#piechart svg')
            .datum(datum)
            .transition().duration(500)
            .attr('width',450)
            .attr('height', 450)
            .call(chart);


        });
}

Views.py:

def ajaxdata(request):

tar = request.GET['tar']
fec = request.GET['fec']
data_raw= Query (tar,fec) #This has a code of its own but
data_json= JSON.parse(data_raw)
data_json2=[{...""}]; #example of data

return HttpResponse(data_json contentype =json) #the actual syntax is the correct one, I used this one to show how i´m doing it.

Jquery代码：

$(document).ready(function(){
    var valor = 1;
    $("#prev").click(function(){
        var date, fec;
        fec = 1;
        tar = 1;
        //I also tried the $.get option
        $.getJSON('data/', {fec: date, tar:tar}, function(data){ 
        //Tried this also var data_json = JSON.parse(data);
        data_piechart = data_json;
        setupGraph(data_piechart);
        });

    });

    $("#next").click(function(){
        var date, fec;
        fec = 2;
        tar = 2;
        $.getJSON('data/', {fec: date, tar:tar}, function(data){ 
        data_piechart = data_json;
        setupGraph(data_piechart);
        });
    });
});

谁能看出问题出在哪里？

感谢您的帮助。

Answer 1

你的 setupGraph 应该有一个 data_piechart 参数。

Django + Jquery + Ajax + D3 不起作用

Django + Jquery + Ajax + D3 won´t work

javascript

django

ajax

jquery

d3.js