title: How to add a fixed range vertical line to a D3.js chart
body: <p>I am trying to add a vertical line on an existing line chart. My data looks likes this - column PC is a calculated percentage - and the vertical line should extend from 0 to 100 percent on the chart:</p>
  
  <pre><code>var data = [
  {"Month":"2014-06" , "PC" : 38 , "items" : 72 }, 
  {"Month":"2014-07" , "PC" : 33 , "items" : 68 }, 
  {"Month":"2014-08" , "PC" : 28 , "items" : 80 }, 
  {"Month":"2014-09" , "PC" : 16 , "items" : 93 }
  ]
  </code></pre>
  
  <p>I build the y axis fine as follows where I have forced the range to be 0 to 100, since the data values do not actually cover the full range:</p>
  
  <pre><code>var y = d3.scale.linear()
  .range([height, 0], 0.5);
  y.domain([0, 100]);
  var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(function(d) { return d + "%"; }).ticks(10);
  </code></pre>
  
  <p>To create the vertical line, I try this:</p>
  
  <pre><code> var linev = d3.svg.line()
      .x(function(d, i) { 
        return x(data[2].Month); })
  .y(function(d, i) { return y(i); }); 
  
   svgx.append("path")
        .datum(data)
      .style("fill", "none")
       .style("stroke", "black")
      .style("stroke-width", "1px")
        .attr("d", linev);
  }
  </code></pre>
  
  <p>The line forms, but I cannot get it to extend in the same range from 0 to 100 percent that the axis does, as I fail to get this line right:</p>
  
  <blockquote>
    <p>.y(function(d, i) { return y(i); });</p>
  </blockquote>
  
  <p>How do I make that set of y values cover the y value of all all the points on the chart corresponding to the percentages from 0 to 100?</p>