I am using raphael.js to draw a simple SVG line graph like this:
When the user hovers the gr
Based on @Duopixel's D3 solution, I wrote the following function for my own use, in pure javascript using DOM API:
function findY(path, x) {
var pathLength = path.getTotalLength()
var start = 0
var end = pathLength
var target = (start + end) / 2
// Ensure that x is within the range of the path
x = Math.max(x, path.getPointAtLength(0).x)
x = Math.min(x, path.getPointAtLength(pathLength).x)
// Walk along the path using binary search
// to locate the point with the supplied x value
while (target >= start && target <= pathLength) {
var pos = path.getPointAtLength(target)
// use a threshold instead of strict equality
// to handle javascript floating point precision
if (Math.abs(pos.x - x) < 0.001) {
return pos.y
} else if (pos.x > x) {
end = target
} else {
start = target
}
target = (start + end) / 2
}
}
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.