score:5

Accepted answer

You are using xScale and yScale when setting up your axes. Apart from being used internally for generating ticks and tick labels these scales will provide easy means of conversion between your SVG's coordinates (the scale's range) and the coordinates used by your grid (the scale's domain), i.e. the values of your data.

To draw the line, you need to apply the scales to the data values as well:

svg.append('line')
    .style('stroke', 'black')
    .attr('x1', xScale(5))
    .attr('y1', yScale(5))
    .attr('x2', xScale(20))
    .attr('y2', yScale(20));

score:-1

I solved it this way:

svg.append('line')
  .style('stroke', 'black')
  .attr('x1', function (d) { return x(5))
  .attr('y1', function (d) { return y(5))
  .attr('x2', function (d) { return x(20))
  .attr('y2', function (d) { return y(20));

score:0

Something's wrong in the way you're calculating vertical axis coordinates,

check this :

svg.append('line')
      .style('stroke', 'black')
      .attr('x1', 5)
      .attr('y1', height -5 )
      .attr('x2', 20)
      .attr('y2', height - 20);

Related Query

More Query from same tag