데이터 세트의 새 데이터가 업데이트되지 않습니다.

Question

다음 코드는 dataset2로 chart1을 업데이트하지만 mychart1 값은 dataset2의 새 값으로 업데이트되지 않습니다. myChart1에 dataset2의 업데이트 된 값을 반영하고 싶지만 디버거에서 assing 된 클래스를 보면 이전 데이터가 업데이트되고 있습니다.

나는이 문제입니다 잘못된

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 문을 사용해야합니다). 값의 배열을 가지고 있기 때문에 값의 인덱스를 키로 사용하려고합니다. 그러면 dataset1의 요소 1이 dataset2의 새 요소 1 값으로 업데이트됩니다.

당신도 특별히 키로 인덱스를 사용할 수 있습니다

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

이상 단순히 키로 인덱스를 사용하기 때문에이 작업을 수행하여 기본 동작입니다.

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