D3 exit().remove() on stack area chart - d3.js

Question

I'm having some trouble with the exit().remove() function in a stacked area chart I am creating.
JSFiddle here: Link
I have functionality where the user can enable/disable the data in the chart by clicking on the legend rectangle/color. I know that the data is being updated based on console messages and the Y axis changing scale, but the data in the chart does not change. For instance if the user deselects the Failed category the orange layer should disappear and the Failed and Passed layers should re-adjust.
The issue appears to be in lines 214 to 234 in the fiddle, specifically where I am calling exit().remove():
// filter the data
var updatedData = dataSeries.filter(function(d) {
if(d.vis === "1"){
return d;
}
else {
return null;
}
});
stack.values(function(d) { return d.values; });
layer = stack(updatedData);
main_layer.selectAll(".layer")
.data(layer);
main_layer
.attr("d", function(d) { return main_area(d.values); });
main_layer.exit().remove();
The error I am getting is Object [object Array] has no method exit I have tried changing the selectAll to just a select, but that also produces the same error. Thanks in advance.

Answer 1

I finally got this working. The code below updates the layers correctly:
// filter the data
var updatedData = dataSeries.filter(function(d) {
if(d.vis === "1"){
return d;
}
else {
return null;
}
});
stack(updatedData);
var sel = main_layer.select(".layer");
sel
.attr("class", function(d) { return d.key + " layer"; })
.style("fill", function(d, i) {
if(d.vis === "1") {
return z(i);
}
else return null;
})
.attr("d", function(d) {
if(d.vis === "1") {
return main_area(d.values);
}
else return null;
});