javascript - 在 d3 中，如何从 SVG 线中获取内插线数据？

Question

我使用 D3 显示折线图，代码大致如下(给定比例函数 x、y 和 float 组 data) :

 var line = d3.svg.line()
         .interpolate("basis")
         .x(function (d, i) { return x(i); })
         .y(function (d) { return y(d); });
 d3.select('.line').attr('d', line(data));

现在我想知道在给定水平像素位置的线的垂直高度。 data 数组的数据点少于像素，并且显示的线是插值，因此仅从给定像素推断线的高度并不直接data 数组。

有什么提示吗？

Answer 1

这个解决方案比公认的答案更有效。它的执行时间是对数的(而接受的答案具有线性复杂性)。

var findYatXbyBisection = function(x, path, error){
  var length_end = path.getTotalLength()
    , length_start = 0
    , point = path.getPointAtLength((length_end + length_start) / 2) // get the middle point
    , bisection_iterations_max = 50
    , bisection_iterations = 0

  error = error || 0.01

  while (x < point.x - error || x > point.x + error) {
    // get the middle point
    point = path.getPointAtLength((length_end + length_start) / 2)

    if (x < point.x) {
      length_end = (length_start + length_end)/2
    } else {
      length_start = (length_start + length_end)/2
    }

    // Increase iteration
    if(bisection_iterations_max < ++ bisection_iterations)
      break;
  }
  return point.y
}