Get y coordinate of point along SVG path with given an x coordinate

Question

I am using raphael.js to draw a simple SVG line graph like this:

When the user hovers the gr

Answer 1

If you know all the points of your path, it might be more performant to search the d attribute of your path for the specific x coordinate you are looking for, and retrieve the y coordinate using regexp:

const regex = new RegExp(`${x} ((\d*.\d*))`)
const match = regex.exec(d)

If you want to find the y of and arbitrary x coordinate not in your paths d attribute, you could loop through all the coordinates of your path and find the x coordinate that is closest to the one you're looking for. Not sure if that would be faster than stepping through the path and calling getPointAtLength though.