Javascript D3 XHR，更新图表

我使用D3XHR从perl脚本加载JSON数据，并使用该数据绘制一条NVD3线。使用下面发布的代码调用脚本和绘制图表：

$(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

但是，当我按下submit按钮时，脚本get再次被调用，但是图表并没有像我所期望的那样得到更新

---

有人能澄清一下，当点击提交按钮时，我需要更改什么才能更新图表吗？

不要添加新的图表，而是更新现有的图表。嗨，拉尔斯，谢谢你的建议，我已经发现我上面发布的代码确实有点低效。我现在唯一的问题是我会怎么做？因为当我第一次按下提交按钮时，图形就被绘制出来了。与其执行nv.addGraph，不如适当地修改现有的图表，然后执行chartSVG.callchart。你能举个例子吗？当我从ajax调用中删除d3图表代码时，将其放在外部并替换为：var chartSVG=d3；我得到一个错误：ReferenceError:chart未定义，这表明我必须在ajax调用中创建图表。