title: D3 update data of svg
body: <p>I am new to D3. I am creating an interactive visualization. I want to update the data based on user's input and re-render (not-re-draww everything) the visualization.
  Code for creating visualization:</p>
  
  <pre><code>cals = d3.select("body").select("svg").selectAll("g")
      .data(yearlyData)  //I want to update this "yearlyData"
      .enter()
      .append("g")
      .attr("id","svgGroup")
      .attr("transform",function(d,i){
          return "translate(0,"+(yOffset+(i*(height+calY)))+")";  
      })
  
  dataRects = cals.append("g")
      .attr("id","dataDays")
      .selectAll("dataDays")
      .data(function(d){
          return d.values;   
      })
      .enter()
      .append("rect")
      .attr("id",function(d) {
          return format(d.date)+":"+d.DEPARTURE_DELAY;
      })
      .attr("stroke","#ccc")
      .attr("width",cellSize)
      .attr("height",cellSize)
      .attr("x", function(d){return xOffset+calX+(d3.time.weekOfYear(d.date) * cellSize);})
      .attr("y", function(d) { return calY+(d.date.getDay() * cellSize); })
      .attr("fill", function(d) {
          if (d.DEPARTURE_DELAY&lt;breaks[0]) {
              return colours[0];
          }
          for (i=0;i&lt;breaks.length+1;i++){
              if (d.DEPARTURE_DELAY&gt;=breaks[i]&amp;&amp;d.DEPARTURE_DELAY&lt;breaks[i+1]){
                  return colours[i];
              }
          }
          if (d.DEPARTURE_DELAY&gt;breaks.length-1){
              return colours[breaks.length]   
          }
      })
  </code></pre>
  
  <p>I tried to use </p>
  
  <pre><code>dataRects.data(newData)  And
  
  d3.select("body").select("svg").selectAll("g").data(newData);
  </code></pre>
  
  <p>in the Onclick() function, but these don't work. The source data is not changed. Can I get some help?</p>
  
  <p>Thanks!</p>