与えられた点で行を延長する

Question

私はいくつかの線を、以下に掲示された画像のような点でグラフにプロットしています： 例えば、私が使用しているポイントA & Bの座標を持っているとしましょう行を設定します。私がしたいのは、x = 0からx = 100までの行の途中で、2つの欠落した「x」個の部分を追加することです。 私はラインをプロットするために、パスを.xと.yアクセサ関数を設定するd3.svg.line()を使用して、としています。私が得たいものをラインまたはパスジェネレータに追加する機能はありますか？ ヒントありがとう、ありがとう！

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

あなたが考慮に直線の傾きを取って、0と100のxでp0とp1を計算する必要があり、線が通過する点。したがって、pointAtX()関数は、パラメータAとBと必要な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を利用するように書き換えることができます。

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 interpolator = d3.scale.linear() 
function pointAtX(a, b, x) { 
    interpolator 
    .domain([a[0], b[0]]) 
    .range([a[1], b[1]]); 
    return [x, interpolator(x)]; 
}