How do I dynamically update displayed elements in D3 - d3.js

Question

I have a function that loads an initial array of points onto a map using D3:
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();
}
I call it initially with a large array:
update(fires);
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:
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 >= startYear && fire.year <= endYear) return fire;
});
console.log(selectedFires.length); //does reflect the proper amount of elements
update(selectedFires);
}
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.
I'm missing something fundamental as the examples I've seen: http://bl.ocks.org/mbostock/3808218 appear to append elements just fine.

Answer 1

Without seeing the rest of the code (which really helps), and focusing on your selection piece alone, try this:
function update(selection) {
// binding the data
feature = g.selectAll(".path")
.data(selection);
// exit selection
feature
.exit()
.remove();
// enter selection
feature
.enter()
.append("path")
.attr("class","path");
// update selection
feature
.style("fill", function(d) {return colorScale(d.area)});
// update selection
feature
.style("fill", function(d) {return colorScale(d.area)})
.attr("d",path); // this was the missing piece!
}
NOTE: you also want to comment out where you hardcoded the extent of the brush:
//brush
var brush = d3.svg.brush()
.x(areaYearScale)
//.extent([1984, 2013]) // comment this out
.on("brushend", brushed);