D3.js Aktualisierung Bar plaudern

Question

var barData = [10, 35, 8, 50, 25]; 

var chartWeight = 800, 
    chartHeight = 400, 
    barWidth = 50, 
    barOffset = 5; 

var myChart = d3.select('#chart') 
    .append('svg') 
    .attr({ 
     width: chartWeight, 
     height: chartHeight 
    }) 
    .style({ 
     background: '#C9D7D6' 
    }); 

function draw(data) { 

    var bars = myChart.selectAll('rect').data(data); 

    bars.exit().remove(); 

    bars.enter().append('rect') 
     .attr({ 
      x: function (d, i) { 
       return (barWidth+barOffset)*i; 
      }, 
      y: function (d) { 
       return chartHeight-d; 
      }, 
      width: barWidth, 
      height: function (d) { 
       return d; 
      } 
     }) 
     .style({ 
      fill: '#C61C6F' 
     }); 

} 

draw(barData); 

setTimeout(function() { 
    var newData = [30, 25, 55]; 
    draw(newData); 
}, 2000); 

http://plnkr.co/edit/gwsuorMUVHDtZzOZnp8Y?p=preview

Ich versuche, die Bar-Chat mit neuen Array von Werten zu aktualisieren. Die Nummer wurde entsprechend dem neuen Array aktualisiert, aber die Größe der Balken änderte sich nicht. kann jemand meinen Fehler erkennen

Answer 1

Sie haben keine „update“ Auswahl:

bars.attr({ 
     x: function (d, i) { 
      return (barWidth+barOffset)*i; 
     }, 
     y: function (d) { 
      return chartHeight-d; 
     }, 
     width: barWidth, 
     height: function (d) { 
      return d; 
     } 
    }); 

Hier ist die Geige: https://jsfiddle.net/yqmdyw6k/

Answer 2

Trennen Sie die Rects, die einmal und aktualisiert konfiguriert sind.

var barData = [10, 35, 8, 50, 25]; 

var chartWeight = 800, 
    chartHeight = 400, 
    barWidth = 50, 
    barOffset = 5; 

var myChart = d3.select('#chart') 
    .append('svg') 
    .attr({ 
     width: chartWeight, 
     height: chartHeight 
    }) 
    .style({ 
     background: '#C9D7D6' 
    }); 

function draw(data) { 

    var bars = myChart.selectAll('rect').data(data); 

    bars.enter().append('rect') 
     .attr({ 
      x: function (d, i) { 
       return (barWidth+barOffset)*i; 
      }, 
      width: barWidth 
     }); 

    // the height (y) is updated 
    bars.attr({y: function (d) { 
      return chartHeight-d; 
     }, 
     height: function (d) { 
     return d; 
     }}) 
     .style({ 
     　fill: '#C61C6F' 
     　}); 

    bars.exit().remove(); 
} 

draw(barData); 

setTimeout(function() { 
    var newData = [30, 25, 55]; 
    draw(newData); 
}, 2000); 

http://plnkr.co/edit/TbTjSFeBfSfyRTaZZlAQ?p=preview