Setzen eines Pfeils (Marker) an einem bestimmten Punkt auf einem Pfad bei Verwendung der d3 Javascript-Bibliothek

Question

Ich arbeite derzeit an einer Grafik-Visualisierung und ich verwende SVG und die D3-Bibliothek. Ich wurde von unserem Designer gefragt, ob ich die Pfeilspitzen der Kanten des Graphen auf eine Position setzen kann, die 80% der Länge der Linien entspricht. Ich war in der Lage, den ersten Teil zu erreichen - die Position zu bekommen - mit der getPointAtLength Methode.

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500) 

var path = svg.append("path") 
    .attr("d", "M20,20C400,20,20,400,400,400") 
    .attr("fill", "none") 
    .attr("stroke", "black"); 

var pathEl = path.node(); 

var pathLength = pathEl.getTotalLength(); 

var pathPoint = pathEl.getPointAtLength(pathLength*0.5); 

var point = svg.append("svg:circle") 
    .style("fill", "red") 
    .attr("r", 5) 
    .attr("cx", pathPoint.x) 
    .attr("cy", pathPoint.y); 

Hier ist ein jsfidle example

Jetzt frage ich mich, wie ich ca eine Pfeilspitze an dieser Position befestigen mit Orientierung entspricht. Noch wichtiger, wie kann ich das tun, damit ich die Kanten des Graphen aktualisieren kann, wenn ich die zugehörigen Knoten verschiebe. ich nicht in der Lage war noch keine Antwort zu finden, die Beispiele auf „Marker“ arbeitet mit Pfad Eigenschaften wie: Stil (‚Marker-End‘, „url (# end-Pfeil)“)

Answer 1

Erstens die lange Antwort von SO. Die schnelle Antwort ist SVG <markers>

Die (grundlegende) kurze Antwort: Nehmen Sie einen Punkt ein wenig vor dem roten Punkt, messen Sie die Steigung und zeichnen Sie eine Linie zwischen den beiden Punkten. Jetzt ist die Frage zu vereinfacht: Wie fügt man einen Pfeil an das Ende einer geraden Linie? Verwenden Sie die schnelle Antwort.

, um Ihren Code hinzufügen dies die Antwort sichtbar zu machen: -

var pathPoint2 = pathEl.getPointAtLength(pathLength*0.78); 
var point2 = svg.append("svg:circle") 
    .style("fill", "blue") 
    .attr("r", 3) 
    .attr("cx", pathPoint2.x) 
    .attr("cy", pathPoint2.y); 

var slope = (pathPoint.y - pathPoint2.y)/(pathPoint.x - pathPoint2.x); 
var x0 = pathPoint2.x/2; 
var y0 = slope*(x0 - pathPoint.x) + pathPoint.y; 

var line = svg.append("svg:path") 
    .style("stroke","green") 
    .attr("d", "M" + pathPoint.x + "," + pathPoint.y + " L" + x0 +","+ y0);