Question

我使用D3 XHR从perl脚本加载JSON数据，并使用该数据绘制NVD3 lineWithFocusChart。调用脚本和绘制图表是使用下面发布的代码完成的：

$(function() { 
$('#dataForm').on('submit', function(e) { //use on if jQuery 1.7+
    e.preventDefault();  //prevent form from submitting
    console.log("submitted form"); //use the console for debugging

    var runFromDate = document.getElementById("runDateSelectBox1").value;
    var runToDate = document.getElementById("runDateSelectBox2").value;
    var barcode = document.getElementById("barcodesSelectBox").value;

    // console.log(runFromDate);
    // console.log(runToDate);
    // console.log(barcode);


    var dataString = 'runFromDate='+ runFromDate + '&runToDate=' + runToDate + '&barcode=' + barcode;
    //var dataString2 = 'runFromDate'+runFromDate&'runToDate'+runToDate&'barcode'+barcode;
      console.log(dataString);


    // Asynchrounsly request JSON from the perl script.
    // And plot this in the graph
    d3.json("./cgi-bin/parseDatabaseData_v2.pl")
       .header("Content-Type", "application/x-www-form-urlencoded")
       .post(dataString,function(error, json){
           console.log("succesfully called script");

            var testdata = json;
            var chart;


            console.log(json);
            nv.addGraph(function() {
              chart = nv.models.lineWithFocusChart()
              .margin({top: 50, right: 60, bottom: 50, left: 80})
              .color(d3.scale.category10().range());


              // Format the 2 x-axes
              chart.xAxis
              .axisLabel('Date')
              .tickFormat(function(d) {
                //var dx = csvData[0].values[d] && csvData[0].values[d].date || 0;
                return d3.time.format('%d-%b-%Y')(new Date(d));
              })
              .showMaxMin(true);

              chart.x2Axis
              .axisLabel('Date')
              .tickFormat(function(d) {
                //var dx = csvData[0].values[d] && csvData[0].values[d].date || 0;
                return d3.time.format('%d-%b-%Y')(new Date(d));
                })
              .showMaxMin(true);

              chart.yAxis
              .axisLabel('Count')
              .tickFormat(d3.format(',f'));
              chart.y2Axis
              .axisLabel('Count')
              .tickFormat(d3.format(',f'));

              var chartSVG = d3.select('#chart1 svg')
                .datum(testdata)
                .transition().duration(500).call(chart);

              //console.log(chartSVG);

              nv.utils.windowResize(chart.update);

              chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

              return chart;

            }); // End of nv.addgraph


                });
            });
           }); // End of jquery function

然而，当我按下提交按钮时，脚本会再次被调用，但图表并没有像我期望的那样得到更新。

有人可以澄清在点击提交按钮时我需要更改什么才能使图表更新？

D3 XHR，更新图表

0 个答案: