title: D3.js area chart is not rendering right
body: <p>Ok, so here is an image that illustrates my problem:
  <img src="https://i.stack.imgur.com/JgFSG.png" alt="wrong graph"></p>
  
  <p>As you can see, the bottom line of the graph area is rendering as a straight line from the Y position of the first element to the Y position of the last one. (It's suposed to be at the bottom)</p>
  
  <p>I read that Y0 and Y1 were the things to set when it comes to solving that problem but I must be doing it wrong. </p>
  
  <p>Can you check my code?</p>
  
  <p>The following is the class function for the creation of the graph:</p>
  
  <pre><code>function StarvingGraph(container, data, settings){
  
  var thisClass = this;
  this.data = data;
  this.settings = settings==undefined ? [15,''] : settings;
  this.container = container;
  this.n = data.length;
  this.duration = 500;
  this.now = new Date(Date.now() - this.duration);
  
  // this hack renders the data wrong
  // this.data.unshift(0);
  // this.data.push(0);
  
  this.margin = {top: 0, right: 0, bottom: 0, left: 0};
  this.width  = $(container).width() - this.margin.right;
  this.height = $(container).height() - this.margin.top - this.margin.bottom;
  
  this.graph = {
      min:0,
      max:parseInt(this.settings[0]*1.40), // the max of the graph will always be 25% more than the threshold
      threshold:parseInt(this.settings[0]),
      unit:this.settings[1]
  }
  
  // set X and Y scalers
  this.x = d3.time.scale()
      .domain([this.now - (this.n - 2) * this.duration, this.now - this.duration])
      .range([0, this.width]);
  
  this.y = d3.scale.linear()
         .range([this.height, 0]);
  
  // update the domains
  this.x.domain([this.now - (this.n - 2) * this.duration, this.now - this.duration]);
  this.y.domain([this.graph.min, this.graph.max]);
  
  // Define the line that goes over the graph
  this.line = d3.svg.line()//.interpolate("basis")
      .x(function(d, i) { return thisClass.x(thisClass.now - (thisClass.n - 1 - i) * thisClass.duration); })
      .y(function(d, i) { return thisClass.y(d); });
  
  // Define the area under the line
  this.area = d3.svg.area()
      .x(function(d,i) { return thisClass.x(thisClass.now - (thisClass.n - 1 - i) * thisClass.duration); })
      .y0(thisClass.height) // bottom ??
      .y1(function(d) { return thisClass.y(d); }); // top
  
  // create the SVG inside the container
  this.svg = d3.select(container).append("svg")
      .attr("width", this.width + this.margin.left + this.margin.right)
      .attr("height", this.height + this.margin.top + this.margin.bottom)
      .style("margin-left", -this.margin.left + "px")
    .append("g")
      .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
  
  // Create the path
  this.path = this.svg.append("g")
      .attr("class", "axis")
        .append("path")
              .datum(this.data)
              .attr('d',this.area)
              .attr("class", "area line graphLine");
  
  // draw the line to the path
  this.svg.select(".graphLine")
      .attr("d", this.line)
      .attr("transform", null);
  
  // From here on are just decorative elements
  // line the lines with the percentages
  
  // add the top line
  this.svg.append('line')
      .attr("x1",0)
      .attr("y1",this.y(this.graph.max)+1)
      .attr("x2",this.width)
      .attr("y2",this.y(this.graph.max)+1)
      .attr("class", "line");
  
  // add the threshold line (dashed)
  this.svg.append('line')
      .attr("x1",38)
      .attr("y1",this.y(this.graph.threshold))
      .attr("x2",this.width)
      .attr("y2",this.y(this.graph.threshold))
      .attr("class", "line dashed red");
  
  // add the top text
  this.svg.append("svg:text")
      .attr("dy", 12)
      .attr("dx", 0)
      .attr('height', 100)
      .attr('class','graphText')
      .text(this.graph.max+this.graph.unit);
  
  // add the threshold text
  this.svg.append("svg:text")
      .attr("dy", this.y(this.graph.threshold)+4)
      .attr("dx", 0)
      .attr('height', 100)
      .attr('class','graphText red')
      .text(this.graph.threshold+this.graph.unit);
  }
  </code></pre>
  
  <p>And this is an example on how to run it:</p>
  
  <pre><code>var x = new StarvingGraph('#testdiv',[10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90,10,50,0,90],["100","%"]);
  </code></pre>
  
  <p>... where #testdiv is just any container. You can even use body if you want (as long its not 0 width or height).</p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/brLP2/1/" rel="nofollow noreferrer">http://jsfiddle.net/brLP2/1/</a></p>
  
  <p>Thanks!</p>