Adding hard coded fixed line to d3 bar chart

Question

Hope you can help me with this, its almost an identical problem to (which does not appear to be complete, as no line shows):

d3.js How to add lines to a bar chart

With the difference being I need to create a hard coded reference line for example at 7%.

I've attempted to create the fiddle here, but cannot get the line to show.

http://jsfiddle.net/ComputerSaysNo/sstSe/1/

I imagine it might be done by changing this...?

bars.append("line") .attr("x1", 0) .attr("y1", function(d,i) { return height - d.average; }) .attr("x2", 10) .attr("y2", function(d,i) { return height - d.average; });

Many Thanks,

Ryan.

Answer 1

You're appending the line to your bars variable, which is the selection for the bars. You need to append the line to the SVG:

svg.append("line")
  .style("stroke", "black")
  .attr("x1", 0)
  .attr("y1", y(0.07))
  .attr("x2", width)
  .attr("y2", y(0.07));

This also sets the coordinates correctly. Remember that you have no data bound to the line, so function(d) { ... } won't work.

Complete demo here. I've also deleted a bunch of unnecessary and broken code.