Strange functionality of NVD3 Graph when updating data

问题

I have some graphs using d3/nvd3. I am now wanting to be able to update the chart data with the click of a button, I have got it working 90% but when I update the data, the functionality becomes inconsistent.

By this I mean that the clickable legend stops working properly, usually you can double click one of them and it would single out the data.

I think somehow when the data updates, it still has the old data in it's memory and this is causing some issues?

Here is my javascript -

  $( document ).ready(function() { 


    var negative_test_data = [{"key":"O1","values":[{"x":"NRW  ","y":1},{"x":"WFW  ","y":3}]},{"key":"O2","values":[{"x":"MED  ","y":1},{"x":"FSEST ","y":1},{"x":"SW  ","y":1},{"x":"LW  ","y":4}]},{"key":"O3","values":[{"x":"SEEG ","y":1},{"x":"DLRW ","y":1},{"x":"SEM  ","y":1},{"x":"DEN ","y":1},{"x":"LEW  ","y":3}]},{"key":"O4","values":[{"x":"BUC ","y":2}]}];


var chart;
nv.addGraph(function() {
    chart = nv.models.multiBarChart()
    .color(d3.scale.category10().range())
      .rotateLabels(0)      //Angle to rotate x-axis labels.
      .transitionDuration(200)
       .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.24)    //Distance between each group of bars.

      ;

chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

chart.x (function(d) { return d.x; })


chart.yAxis
        .tickFormat(d3.format(',.1f'))
 .axisLabel('Defect Count')
 .axisLabelDistance(40);


    d3.select('#chart1M svg')
        .datum(negative_test_data)
       .call(chart);

           return chart;
});






                });







var update = function() {



 var data = [{"key":"O1","values":[{"x":"NRW  ","y":20},{"x":"WW  ","y":3}]},{"key":"O2","values":[{"x":"ME  ","y":1},{"x":"FST ","y":1},{"x":"SW  ","y":1},{"x":"LEW  ","y":4}]},{"key":"O3","values":[{"x":"SEEG ","y":1},{"x":"DLW ","y":1},{"x":"SEM  ","y":1},{"x":"DE ","y":1},{"x":"LW  ","y":3}]},{"key":"O4","values":[{"x":"BUDC ","y":2}]}];



             var chart;
           nv.addGraph(function() {
          chart = nv.models.multiBarChart()
           .color(d3.scale.category10().range())
           .rotateLabels(0)      //Angle to rotate x-axis labels.
           .transitionDuration(250)
           .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
           .groupSpacing(0.24)    //Distance between each group of bars.

           ;

            chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

            chart.x (function(d) { return d.x; })


            chart.yAxis
            .tickFormat(d3.format(',.1f'))
            .axisLabel('Defect Count')
            .axisLabelDistance(40);

            d3.select('#chart1M svg')
            .datum(data)
            .call(chart);




            return chart;     
            });

        };

Here is the JSFIDDLE - http://jsfiddle.net/kd82ep7p/8/ so that it can be demonstrated,

Before the data is updated you can play with the legend and select the data you want to see and even double click it.

After you click the update button, it becomes a problem,

If anyone could take a look I would greatly appreciate it.

来源：https://stackoverflow.com/questions/27130835/strange-functionality-of-nvd3-graph-when-updating-data

标签

javascript