数据集中的新数据没有得到更新

Question

我有以下代码来更新chart1与dataset2，但在结果mychart1值不会更新到数据集2中的新值。我希望dataset2中的更新值能够反映在myChart1中，但当我查看调试器中分配的类时，旧数据会更新。

有人能指出我在哪里，我错了

function chart() { 

      //Width and height 
      var w = 200; 
      var h = 100; 
      var barPadding = 2; 
      var max = 0; 

      this.createChart = function(dataset,cls) { 

       //create svg element 
       var svg = d3.select("#chartDisplay").append("svg").attr("class",cls).attr(
         "width", w).attr("height", h); 

       //create rect bars 
       var rect = svg.selectAll("rect").data(dataset,function(d, i) {return d;}); 

       rect.enter() 
        .append("rect") 
        .attr("class","original") 
        .attr("x",function(d, i) { 
          return i * (w/dataset.length); 
         }) 
        .attr("y", function(d) { 
          return h - d * 3; //Height minus data value 
         }) 
        .attr("width", w/dataset.length - barPadding) 
        .attr("height", function(d) { 
          return d * 3; 
         }); 

       max = d3.max(dataset); 
       var xScale = d3.scale.linear().domain([ 0, max ]).range(
         [ 0, w ]); 

      } 

      this.updateChart = function(dataset,cls) { 

       var svg = d3.select("#chartDisplay").select("svg."+cls); 

       var rect = svg.selectAll('rect') 
           .data(dataset,function(d, i) { 
            return d; 
           }); 

       rect.attr("y", function(d) { 
        return h - d * 3; //Height minus data value 
         }) 
        .attr("height", function(d) { 
         return d * 3; 
         }); 

       rect.attr("class","updated"); 

      } 

      this.getMax = function() { 
       return max; 
      } 

     } 

     var dataset1 = [ 5, 10, 12, 19, 21, 25, 22, 18, 15, 13 ]; 
     var dataset2 = [ 1, 4, 14, 19, 16, 30, 22, 18, 15, 13 ]; 

     var myChart1 = new chart(); 
     myChart1.createChart(dataset1,"chart1"); 
     myChart1.updateChart(dataset2,"chart1"); 

     var myChart2 = new chart(); 
     myChart2.createChart(dataset2,"chart2"); 

Answer 1

这就是问题所在：

var rect = svg.selectAll('rect') 
       .data(dataset,function(d, i) { return d; }); 

这是告诉d3使用数据值作为密钥到您的阵列。由于您的值正在发生变化，因此不同的值不匹配，因此它们不会更新（您需要使用另一个append语句才能显示它们）。由于您只有一个值数组，因此您希望使用该值的索引作为关键字（这样可以使数据集1中的元素1更新为数据集2中新元素1的值）。

您可以专门使用索引的关键：

var rect = svg.selectAll('rect') 
       .data(dataset,function(d, i) { return i; }); 

或者更简单地说，通过使用以来该指数的关键在做，这是默认的行为。

var rect = svg.selectAll('rect') 
       .data(dataset);