延長線與給定點

Question

我有幾條線繪製在一個圖形中的點，看起來像下面發佈的圖像中的點： 讓我們說，例如，我有座標點A &乙，我用它設置線路。我想要做的就是從x = 0到x = 100的所有路線，添加兩個缺失的「x」部分。 我使用d3.svg.line()來設置.x和.y訪問器函數，然後是一條繪製線條的路徑。有沒有函數可以添加到行或路徑生成器中，以實現我想要的功能？ 任何提示表示讚賞，謝謝！

Answer 1

有沒有建立它的方式，但它不是很難計算自己。

比方說，你當前正在繪製這樣A和B之間的界限：

var A = [15, 40], // x of 15 and y of 40 
    B = [85, 90], 
    line = d3.svg.line(); 

path.attr('d', line([A,B])) 

你需要計算p0和p1在0和100×，考慮到直線的斜率和該線路經過的一點。所以你需要一個功能pointAtX()，它需要參數A和B以及所需的x座標並返回適當的y座標。

function pointAtX(a, b, x) { 
    var slope = (b[1] - a[1])/(b[0] - a[0]) 
    var y = a[1] + (x - a[0]) * slope 
    return [x, y] 
} 

然後你就可以得出這樣的行：

var A = [15, 40], // x of 15 and y of 40 
    B = [85, 90], 
    line = d3.svg.line(), 
    p0 = pointAtX(A, B, 0), 
    p1 = pointAtX(A, B, 100), 

path.attr('d', line([p0,p1])) 

有趣的是，pointAtX()實施可以重新寫入利用d3.scale.linear。不知道它是更好的，但很酷：

var interpolator = d3.scale.linear() 
function pointAtX(a, b, x) { 
    interpolator 
    .domain([a[0], b[0]]) 
    .range([a[1], b[1]]); 
    return [x, interpolator(x)]; 
}