我正在使用raphael.js绘制一个简单的SVG线图,如下所示：
当用户悬停图形时,id喜欢显示指向光标X位置的行的弹出窗口,以及位于该X位置的Y位置,如下所示：
我需要获取路径并找到给定X坐标的Y坐标.
解决方法
基于@ Duopixel的D3解决方案,我使用DOM API在纯
JavaScript中编写了以下函数供我自己使用：
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
}
}
