我面临着尝试在系列图上的点之间插入值的问题,即我的数据如下所示(请假设随机 x,y 坐标)
[[x0,y0], [1,1],[2,2], [2,3],.....[x,y]]
对于插值器,我想给它 1.5,在这种情况下插值器函数应该返回 1.5。在数据随机的其他情况下,它应该找到给定点集的最佳拟合,并返回给定 x 值的 y 值
使用 d3 interpolate*** 函数可以实现这一点吗?
谢谢
最佳答案
虽然您可以使用 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 值排序,才能按预期工作。
关于javascript - 给定 n 个数据点,如何生成插值函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26877497/