javascript - 给定 n 个数据点，如何生成插值函数？

Question

我面临着尝试在系列图上的点之间插入值的问题，即我的数据如下所示(请假设随机 x,y 坐标)

[[x0,y0], [1,1],[2,2], [2,3],.....[x,y]]

对于插值器，我想给它 1.5，在这种情况下插值器函数应该返回 1.5。在数据随机的其他情况下，它应该找到给定点集的最佳拟合，并返回给定 x 值的 y 值

使用 d3 interpolate*** 函数可以实现这一点吗？

谢谢

Answer 1

虽然您可以使用 d3 插值器来完成此操作，但使用 muli-part linear scale 可能会更容易.

通常，线性刻度具有二值域和二值范围，所有其他值均根据域和范围的起点和终点之间的直线计算。但是，您可以将域和范围设置为包含多个值的数组(只要两个数组的长度相同)，并且比例将充当域的每个部分的一系列直线关系。

换句话说，如果您使用 x 值数组作为比例域，使用 y 值数组作为范围，那么您可以输入任何 x 值，比例将返回相邻 y 之间的线性插值值(value)观。对于超出您的点的值，它将推断初始或最终线性关系:

var points = [
  [0,10],
  [1,32],
  [2,14],
  [3,15]
  ];

var multiLine = d3.scale.linear()
    .domain(
      points.map(function(p){return p[0];})
    )
    .range (
      points.map(function(p){return p[1];})
    );

document.body.innerHTML =
  "Line at 0.0: " + multiLine(0) + "<br/>" +
  "Line at 1.0: " + multiLine(1) + "<br/>" +
  "Line at 1.5: " + multiLine(1.5) + "<br/>" +
  "Line at 2.3: " + multiLine(2.3) + "<br/>" +
  "Line at 3.0: " + multiLine(3) + "<br/>" +
  "Line at 4.0: " + multiLine(4) ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

请注意，您需要确保您的点按 x 值排序，才能按预期工作。