CODEWITHSUNDEEP
d3.js
Gangrel
Gangrel

Reputation: 481

Adding a y axis horizonal line to a D3 scatter chart

I have created a scatter chart in D3 using images and now need to add a horizonal line to the chart based on the value of the "yave" field from my dataset which equals 5

I have added the following script that I know has worked in previous assignments but now I can't seem to align it to the y-axis:

//y-average-line

var yaveline = function(d) {
  return data[0].yave;
}

var line = svg.append("line")
  .attr("x1", 0)
  .attr("x2", width)
  .attr("y1", yaveline)
  .attr("y2", yaveline)
  .attr("stroke-width", 1)
  .attr("stroke", "black")
  .attr("stroke-dasharray", "3,3");

A line is created but it appears near the top of the y-axis rather than at y = 5

Any ideas would be greatly appreciated. My fiddle is here

Upvotes: 0

Views: 24

Answers (1)

Rodrigo Divino
Rodrigo Divino

Reputation: 1931

It appears at the top because the 5 is interpreted by the SVG as pixel coordinates, so it is at pixel y=5 (SVG counts from top to bottom). In your case, the 5 is not in pixel space, but in data space. To convert from the data space to the pixel space you have to use the yScale, the same way you do with the circles on the scatterplot:

var yaveline = function(d) {
  return yScale(data[0].yave);
}

This will convert data[0].yave from data to pixel, that is, it will return the pixel that is associated with the data value.

Upvotes: 2

Related Questions