给定SVG路径上的x坐标，获取该点的y坐标

Question

我正在使用raphael.js绘制一个简单的SVG线条图，类似于这样：

当用户悬停在图上时，我希望显示一个弹出框，指向鼠标光标所在的X位置处的线条，并在该X位置的线条的Y位置处显示，如下所示：

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

- Hippocrates

---

我用D3制作了这个，但很容易转移到Raphael上：http://bl.ocks.org/duopixel/3824661 - methodofaction

@Duopixel 那其实就是答案，你应该把它发表为一个答案。 - hlfcoding

链接已经失效，但幸运的是它被存档了：https://web.archive.org/web/20181011120958/http://bl.ocks.org/duopixel/3824661 - andrzej1_1

Answer 1

根据@Duopixel的D3解决方案，我使用纯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
  }
}

- Wei

Answer 2

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

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

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

- Alexander Flink