如何獲得兩點之間的一組子點d3

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

（PS注意，要d3.range第三個參數是步大小，而不是步數）

你當然可以創建插值樂趣ction在同一個地方，你使用它，而不是將其保存到一個變量：

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