Data Joins With D3.stack.layout()

I've created a plunk to demonstrate my problem. The issue is that my .enter(),update(),exit() method is not working for my d3.chart.layout() visualization. Instead, I get the class

Solution 1:

So I got it to work, though I'm still confused as to why it works this way. I needed to move the svg adding out of the update function and into the namespace (that was obvious).

But the update became this, with a transition() method. Can anyone help me understand where I went wrong?

  test = svg.selectAll("path").data(layers, function(d){return d.key})

      test.enter().append("path")

      test.style("opacity",1).style("fill", function(d, i) { return z(i); })
        .attr("class", "layer").transition()
      .duration(2000)
        .attr("d", function(d) { return area(d.values); });

      test.exit().transition().duration(1500).style("opacity",0).remove();