title: Add a line on the y axis d3
body: <p>I have created a bar chart using d3.js but I need a solid black line at 80 on the y axis going across the chart to indicate a 'maximum threshold'</p>
  
  <p>I've figured out how to draw a line at the bottom but I need it to always appear at the value 80 on the chart. Is there anyway to do this?</p>
  
  <pre><code>var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);
  
  var y = d3.scale.linear()
      .range([height, 0])
      .domain([0,1000]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10);
  
  
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  d3.tsv("data.tsv", type, function(error, data) {
    x.domain(data.map(function(d) { return d.name; }));
    y.domain([0, d3.max(data, function(d) { return d.risk; })]);
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
  
    var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);
    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.name); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { console.log(d); return y(d.risk); })
        .attr("height", function(d) { return height - y(d.risk); })
        .style("fill", function(d) {            // &lt;== Add these
              if (d.risk &gt;= 80) {return "#e74c3c"}  // &lt;== Add these
              else    { return "#3498db" }          // &lt;== Add these
          ;})
        .on("mouseover", function(d) {
          // debugger
          d3.select(this).transition().style({opacity:'0.6'});
           console.log(d,this.x);
              div.transition()
                  .duration(200)
                  .style("opacity", .9);
              div .html(d.risk)
                  .style("left", (this.x.baseVal.value + (this.width.baseVal.value/2) + 15) + "px")
                  .style("top", (this.y.baseVal.value + (this.height.baseVal.value/2)) + "px");
              })
          .on("mouseout", function(d) {
              div.transition()
                  .duration(500)
                  .style("opacity", 0);
              d3.select(this).transition().style({opacity:'1'});
          });
  
        var median = d3.median(svg.selectAll('.bar').data(),
          function(d) { return d.risk; });
  
        var median = svg.append("line")
                           .attr("x1", 0)
                           .attr("y1", (height/10)*0.8)
                           .attr("x2", width)
                           .attr("y2", (height/10)*0.8)
                           .attr("stroke-width", 2)
                           .attr("stroke", "black");
  
  });
  </code></pre>