Linie mit gegebenen Punkten verlängern

Question

Ich habe ein paar Linien mit Punkten in einem Diagramm gezeichnet, die wie die in dem Bild unten aussehen: sagen wir zum Beispiel, dass ich die Koordinaten für Punkte A & B habe, die ich verwende setze die Linie. Ich möchte, dass die Linie von x = 0 nach x = 100 geht und die beiden fehlenden "x" Stücke hinzugefügt werden. Ich verwende d3.svg.line(), um die .x und .y Accessor-Funktionen und dann einen Pfad zum Plotten der Linie. Gibt es eine Funktion, die der Zeile oder dem Pfadgenerator hinzugefügt wird, die das tut, was ich erhalten möchte? Jeder Hinweis ist dankbar, danke!

Answer 1

Es gibt keine eingebaute Möglichkeit, es zu tun, aber es ist nicht zu schwer, sich selbst zu berechnen.

Lassen Sie uns sagen, Sie sind zur Zeit die Grenze zwischen A und B wie diese Zeichnung:

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

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

Sie benötigen p0 und p1 bei x von 0 und 100 zu berechnen, unter Berücksichtigung der Neigung der Linie und ein Punkt, den die Linie durchläuft. Sie benötigen also eine Funktion pointAtX(), die als Parameter A und B und eine gewünschte x-Koordinate übernimmt und die entsprechende y-Koordinate zurückgibt.

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

Dann können Sie die Zeile wie folgt zeichnen:

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

Interessanterweise kann die Umsetzung von pointAtX() neu geschrieben werden Verwendung von d3.scale.linear zu machen. Nicht sicher ist es besser, aber irgendwie cool:

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