title: Appending an element to an existing element in d3.js
body: <p>I am trying to create a realtime barchart that plots values over time, using d3.js</p>
  
  <p>This is how I am doing it.</p>
  
  <pre><code>var dataset = [ 5, 10, 15, 20, 25 ];
  var w = 1800;
  var h = 500;
  var barPadding = 1;
  
  setInterval(function(){
      dataset.push(Math.floor(Math.random()*51));
      draw();
  },1000);
  
  function draw(){
  
      d3.select("svg").remove();
      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 12*i;})
          .attr("y", function(d){return h -d*4; })
          .attr("width", 11)
          .attr("height", function(d) { return d * 4; })
          .attr("fill", "teal")
          .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";});
  }
  </code></pre>
  
  <p>The problem is that I am redrawing the whole graph every time a new value is added to the data array. </p>
  
  <p>How do I append a bar to the bar graph that is already drawn, every time a new value is added to the array, rather than redrawing it every time?</p>