使用给定的 x 坐标获取沿 SVG 路径的点的 y 坐标

Question

我正在使用 raphael.js 绘制一个简单的 SVG 线图，如下所示：

当用户悬停图形时， id 喜欢显示一个弹出框，指向光标X位置的线，以及Y位置的线所在的X位置，如下所示：

我需要走路径并找到给定X坐标的Y坐标。

Answer 1

基于@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
  }
}

Answer 2

如果您知道路径的所有点，那么在路径的d属性中搜索您要查找的特定 x 坐标并使用正则表达式检索 y 坐标可能会更高效：

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

如果您想找到不在路径 d 属性中的 y 坐标和任意 x 坐标，您可以遍历路径的所有坐标并找到最接近您要查找的坐标的 x 坐标。 不确定这是否比单步执行路径并调用getPointAtLength更快。