Question

我有一些使用d3 / nvd3的图表。我现在想要能够通过单击按钮更新图表数据，我已经让它工作了90％但是当我更新数据时，功能变得不一致。

我的意思是可点击的图例停止正常工作，通常你可以双击其中一个，它会挑出数据。

我想某种方式，当数据更新时，它的内存中仍然存在旧数据，这会导致一些问题吗？

这是我的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;     
            });

        };

这是JSFIDDLE - http://jsfiddle.net/kd82ep7p/8/，以便可以演示，

在更新数据之前，您可以使用图例进行播放并选择要查看的数据，甚至可以双击它。

单击更新按钮后，它就成了问题，

如果有人可以看看我会非常感激。

更新数据时NVD3 Graph的奇怪功能

0 个答案: