D3.js更新バーは、私は新しい値の配列を持つバーチャットを更新しようとしています

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

チャット。番号は新しい配列に従って更新されましたが、バーのサイズは変更されませんでした。誰か私のミスを見つけ

Answer 1

あなたが「更新」を選択していないことができます。ここでは

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

はフィドルです：https://jsfiddle.net/yqmdyw6k/

Answer 2

は、一度設定され、更新されrectsを区切ります。

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