如何在两点之间获取一组子点？

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);

这真的可能吗？

- Mkni1408

---

没有D3函数可以给你这个，但如果你正在进行线性插值，你可以为y值做与x值相同的操作。 - Lars Kotthoff

谢谢，我决定实现Bresham算法来近似两个坐标之间的点 :) - Mkni1408

Answer 1

你可以使用插值函数和数组映射函数结合起来完成此操作。

创建一个插值函数，通过给它起始和结束的值。生成的函数接受从0到1的值，并返回对应的起始和结束值之间的距离。

D3插值器函数特别适用于您的情况，因为它们可以插值对象，而不仅仅是单个数字；在起始和结束对象中都存在的每个属性将被插值。

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

要创建一个由固定数量的均匀间隔点组成的数组，您需要创建一个在0到1之间均匀分布的值数组，然后将这些数字映射到相应的插值对象。

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

（P.S. 注意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}) 
              );

- AmeliaBR

---

谢谢，正是我需要的！:D - Mkni1408