title: d3.js bar chart new data adding onto bars,
body: <p>Please see the code below. Data is randomly generated from googlesheets, when get random data button is selected, data is retrieved from the google sheets. When new table button is selected, the bar chart appears.</p>
  
  <p>However if the 1st bar chart that appears 1st value is 5, and when the data updates and the value should be 1, the bar chart look like 6. </p>
  
  <p>I don't want to remove the rect, as I do want to do some transition to show the bars increasing and decreasing. I am currently using: <a href="http://d3js.org/d3.v3.min.js" rel="nofollow noreferrer">http://d3js.org/d3.v3.min.js</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="change"&gt;
    &lt;input type="button" 
      style = "margin-right: 450px;"
      value="New Table" 
      onclick="test()" /&gt;
  &lt;/div&gt;         
  
  &lt;div id="option"&gt;
    &lt;input type="button" 
      style = "margin-right: 450px;"
      value="Different Random Data" 
      onclick="remove()"  /&gt;
  &lt;/div&gt;
  
  
  &lt;div id="table"&gt;&lt;/div&gt;
  &lt;div id="myclonediv"&gt;&lt;/div&gt;
  
  &lt;script&gt;
    updateCode()
    var canvas = d3.select("body").append("svg")
      //width and height
      .attr("width", 300)
      .attr("height", 1000);
  
    function test() {
      var source = document.getElementById('table');
      var destination = document.getElementById('myclonediv');
      var copy = source.cloneNode(true);
      copy.setAttribute('id', 'myclonediv');
      destination.parentNode.replaceChild(copy, destination);
  
      //d3.selectAll("rect").remove();
      //d3.selectAll("text").remove();
  
      createGraph()
    }
  
    function createGraph() {
      d3.csv(googlesheets, function(data) {
  
        //create container - canvas
  
        //svg = d3.select("svg")
  
        //add bars  - rectangle 
        canvas.selectAll('svg')
          .data(data)
          .enter()
          .append('rect')
          //width - d will reference data, d.age - from csv file * 10 so bars are bigger
          .attr("width", function(d) { return d.Random * 10})
          //was 50 now 48 to allow space between bars
          .attr("height", 48)
          // y function of the index, for each element
          .attr("y", function(d, i) { return i *50})
          //colour blue
          .attr("fill", "blue");
  
          //.transition()
          //.delay(function(d,i){return i *300;})
          //.duration(100000)
          //.attr("opacity", 1)
  
          //var newData = parsedCSV.replace(',', '');
          //var test = parsedCSV.substring(parsedCSV.indexOf(",") + 1);
  
        //text = d3.select("text")
        //add text to each bar - repeat before
        canvas.selectAll("svg")
          .data(data)
          .enter()
          .append("text")
          //white text
            .attr("fill", "red")
            //same position on each bar -- + 24 is half of 48 in height -- now middle of bar
            .attr("y", function(d,i) { return i *50+24})
            //what text - d.name
            .text(function(d) { return d.Random; }) 
  
      }); 
  
  
    }
  
    function remove() {
      var tableCode = d3.select("#table");
      tableCode.selectAll("*").remove();
      updateCode()
    }
  
  
    function updateCode() {
      var tabulate = function (data,columns) {                      
         var table = d3.select('#table').append('table')
         var thead = table.append('thead')
         var tbody = table.append('tbody')
  
         thead.append('tr')
           .selectAll('th')
           .data(columns)
           .enter()
           .append('th')
             .text(function (d) { return d })
  
         var rows = tbody.selectAll('tr')
           .data(data)
           .enter()
           .append('tr');
  
         var cells = rows.selectAll('td')
           .data(function(row) {
              return columns.map(function (column) {
                  return { column: column, value: row[column] }
              })
           })
           .enter()
           .append('td')
           .text(function (d) { return d.value })
  
        return table;
     };
  
     d3.csv(googlesheets,function (data) {
       var columns = ['Test','Random']
       tabulate(data,columns);                
     });
   }  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>This code works perfectly if I uncomment </p>
  
  <pre><code>d3.selectAll("rect").remove();
  d3.selectAll("text").remove();
  </code></pre>
  
  <p>But as I want to show the bars increasing and decreasing when data is updated.</p>
  
  <p>Thanks</p>