Add a line on the y axis d3 - d3.js

Question

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'
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?
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) { // <== Add these
if (d.risk >= 80) {return "#e74c3c"} // <== Add these
else { return "#3498db" } // <== 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");
});

Answer 1

You have already built a scale function y which translates values on your input scale into your chart height output range. You use this when you calculate where to draw the top of each bar. You can simply use this function again when drawing the threshold line:
// not clear if you meant 80 as 80% or as literal value 80 on your input scale
var threshold = 80;
var median = svg.append("line")
.attr("x1", 0)
.attr("y1", y(threshold))
.attr("x2", width)
.attr("y2", y(threshold))
.attr("stroke-width", 2)
.attr("stroke", "black");