画一条直线D3.js

Question

I feel like this has a really simple solution but I have been struggling for a while now. I have a d3 line graph and I want to draw a line on the graph that represents the average of the data. I am trying to do this with the line attribute but I keep getting the same errors. The errors I keep getting are:

"Unexpected value NaN parsing y1 attribute. Unexpected value NaN parsing y2 attribute. "

Here is the code where I try to draw the line:

student_av_data.forEach(function(d) { 
     d.student_average = +d.student_average; 
     });

svg.append("line")
    .style("stroke", "orange")
    .style("opacity", 1)
    .attr("x1", 0)
    .attr("y1", y0(function(d) {return y0(d.student_average);}))
    .attr("x2", width)
    .attr("y2", y0(function(d) {return y0(d.student_average);}));

function(d) {return y0(d.student_average);} should just be a number and that should work in the y0 arguments.

Not really sure what is wrong. Any suggestions would be appreciated. Thanks!

EDIT:

As a reference, this works and is basically what I am trying to do but with d.student_average in y0() :

svg.append("line")
    .style("stroke", "black")
    .style("opacity", .2)
    .attr("x1", 0)
    .attr("y1", y0(24))
    .attr("x2", width)
    .attr("y2", y0(24));

Answer 1

Try replacing with this:

 svg.append("line")
        .style("stroke", "orange")
        .style("opacity", 1)
        .data(student_av_data)
        .attr("x1", 0)
        .attr("y1", function(d) {return y0(d.student_average);})
        .attr("x2", width)
        .attr("y2", function(d) {return y0(d.student_average);});

which will take d from the data elem