title: How do I dynamically update displayed elements in D3
body: <p>I have a function that loads an initial array of points onto a map using D3:</p>
  
  <pre><code>  var fires = []; //huge array of objects 
  
    function update(selection) {
  
      feature = g.selectAll("path")
       .data(selection);
  
      feature.attr("class", "update");
  
      feature.enter().append("path")
       .attr("class", "enter")
       .style("fill", function(d) {return colorScale(d.area)});
  
      feature.exit().remove(); 
    }
  </code></pre>
  
  <p>I call it initially with a large array:</p>
  
  <pre><code>update(fires);
  </code></pre>
  
  <p>I also have a histogram that allows me to narrow down the selection based on years. Using a D3 brush, on 'brushend' I call a function called brushed:</p>
  
  <pre><code>function brushed() {
      if (!d3.event.sourceEvent) return; // only transition after input
      var extent0 = brush.extent();
      startYear = Math.floor(extent0[0]);
      endYear = Math.floor(extent0[1]);
  
      var selectedFires = fires.filter(function(fire) {
          if(fire.year &gt;= startYear &amp;&amp; fire.year &lt;= endYear) return fire;
      });
  
      console.log(selectedFires.length); //does reflect the proper amount of elements
  
      update(selectedFires);
  }
  </code></pre>
  
  <p>When I narrow the selection, the points on the map disappear as expected. When I widen it, the points/elements do not return. The array is getting the correct elements in it, they're just not being appended to the SVG.</p>
  
  <p>I'm missing something fundamental as the examples I've seen: <a href="http://bl.ocks.org/mbostock/3808218" rel="nofollow">http://bl.ocks.org/mbostock/3808218</a> appear to append elements just fine.</p>