d3 clip-path not working for filled line graph

Question

I have a filled line graph and I am trying to set a clip-path. Right now the filled area descends below the graph border and into the axis notations.

Here is a JS fiddle of my code: http://jsfiddle.net/HgP6D/6/

Even setting the clip-path to a small value doesn't seem to change anything:

// Add the clip path.
g.append("clipPath")
.attr("id", "rect")
.append("rect")
.attr("width", 100)
.attr("height", 100)

Anyone have any idea? Thanks.

Answer 1

I don't know about the clip path, but this fixes the area so it doesn't descend below 0:

var area = d3.svg.area()
    .interpolate( "monotone" )
    .x(function(d,i) { return x(i); })
    .y0(-y(0))
    .y1(function(d) { return -y(d); })