javascript - 如何获得两点之间的一组子点？

Question

这个问题一直困扰着我。我有这段代码来计算两个值之间的子值:

var lineData = d3.range(from,to, 15);

这基本上给出了 15 个子值。

我正在使用 JavaScript 在两点之间绘制一条路径。

所以一直困扰我的是，这只给我一个轴上的子值。例如在 x0 和 x1 之间，但这只能让我朝一个方向绘制。

因此，我的问题是是否有某种 d3 函数可以让我获得两组坐标之间的子点。像这样:

var lineData = d3.range(x_from, y_from, x_to, y_to 15);

这可能吗？

Answer 1

您可以结合使用插值器函数和数组映射函数来执行此操作。

您创建一个 interpolator function通过给它开始和结束值。结果函数采用 0 到 1 之间的值，并返回一个结果，该结果是起始值和结束值之间的相应距离。

使 d3 插值器函数对您的情况特别有用的原因是它们可以插值对象，而不仅仅是单个数字；开始和结束对象中存在的每个属性都将被插入。

var iFunc = d3.interpolateObject([x1,y1], [x2,y2]);

然后要创建一个在这两个值之间具有固定数量的均匀间隔点的数组，您需要创建一个在 0 和 1 之间均匀间隔的值数组，然后将这些数字映射到相应的插值对象:

var lineData = d3.range(0, 1, 1/15).map( iFunc );

(请注意，d3.range 的第三个参数是步长大小，而不是步数。)

您当然可以在使用它的同一位置创建插值器函数，而不是将其保存到变量中:

var lineData = d3.range(0, 1, 1/15).map(d3.interpolateObject([x1,y1], [x2,y2]) );

你的点可以很容易地成为键:值对象而不是数组:

var lineData = d3.range(0, 1, 1/15).map(
                        d3.interpolateObject({x:x1, y:y1}, {x:x2, y:y2}) 
              );