Получить координату точки вдоль пути SVG с Дано координаты х

Question

Я использую Raphaël.js сделать простой SVG линейный график, как это:

Когда пользователь наводит курсор на график, как идентификатор для отображения поповер, указывающий на линии в положении Х курсора, а в положенииY, где линия является для этой позиции Х следующим образом:

Мне нужно проложить путь и найти Y координата для данного X координата.

Answer 1

на основе решения D3 @ Duopixel, я написал следующую функцию для собственного использования, в чистом JavaScript с использованием 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 
    } 
}