title: D3 auto updates when array length change
body: <p>I have simple code here from Interactive Data Visualization by Scott Murray with minor changes. What I changed is the initial data's length <code>5</code> is different from the <code>dataset1</code>'s length <code>25</code> in the <code>click</code> function.</p>
  
  <p>However, every time I click and update, it does generate random new numbers but the length only shows 5 bars. </p>
  
  <p>What is the reason for this? And how could I modify to change it?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script type="text/javascript" src="../d3/d3.v3.js"&gt;&lt;/script&gt;
      &lt;title&gt;D3  index01 &lt;/title&gt;
      &lt;style type="text/css"&gt;
      div.bar{
          display: inline-block;
          width: 20px;
          height: 75px;
          background-color: teal;
          margin-right: 2px;
  
      }
      &lt;/style&gt;
  &lt;/head&gt;
      &lt;body&gt;
      &lt;p&gt; click it &lt;/p&gt;
  
          &lt;script type = "text/javascript"&gt;
          var w=600;
          var h = 250;
          var dataset = [5,10,13,14,15];
  
          var xScale = d3.scale.ordinal()
              .domain(d3.range(dataset.length)).rangeRoundBands([0,w],0.05);
  
          var yScale = d3.scale.linear()
              .domain([0,d3.max(dataset)]).range([0,h]);
  
          var svg = d3.select("body")
                      .append("svg")
                      .attr("width",w)
                      .attr("height",h);
  
          svg.selectAll("rect")
                  .data(dataset)
                  .enter()
                  .append("rect")
                  .attr("x", function(d,i){
                      return xScale(i);
                  })
                  .attr("y",function(d){return (h-yScale(d));})
                  .attr("width",xScale.rangeBand())
                  .attr("height",function(d){return yScale(d);});
  
          svg.selectAll("text")
                 .data(dataset)
                 .enter()
                 .append("text")
                 .text(function(d) {
                      return d;
                 })
                 .attr("text-anchor", "middle")
                 .attr("x", function(d, i) {
                      return xScale(i)+xScale.rangeBand() / 2;
                 })
                 .attr("y", function(d) {
                      return h - yScale(d) + 14;
                 })
                 .attr("font-family", "sans-serif")
                 .attr("font-size", "11px")
                 .attr("fill", "white");
  
          d3.select("p")
              .on("click",function(){
                  var dataset1  = [];
                  for(var i=0; i&lt;25; i++){
                      var newNumber = Math.floor(Math.random()*25);
                      dataset1.push(newNumber);
                  }
  
                  svg.selectAll("rect").data(dataset1)
                  .transition()
                  .delay(function(d,i){
                      return i*100;
                  })
                  .duration(500)
                  .attr("x",function(d,i){
                      return xScale(i);
                  })
                  .attr("y",function(d){
                      return h-yScale(d);
                  })
                  .attr("x", function(d,i){
                      return xScale(i);
                  })
                  .attr("height",function(d){
                      return yScale(d);
                  })
                  .attr("fill",function(d){
                      return "rgb(0,0, " + (d*10) + ")";
                  });
  
                  svg.selectAll("text").data(dataset1).
                  text(function(d) {
                      return d;
                  })
                     .attr("x", function(d, i) {
                              return xScale(i) + xScale.rangeBand() / 2;
                  })
                     .attr("y", function(d) {
                     return h - yScale(d) + 14;
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>