Hinzufügen von Pfeilenden Linien D3.js

Question

ich mit der folgenden Geige arbeite: https://jsfiddle.net/4ovue3s8/12/

ich die Verbindungen zwischen den Knoten mag Pfeil-Enden haben, wie in dieser: http://jsfiddle.net/maxl/mNmYH/2/

I ein Markierungselement auf dem SVG wie folgt hinzugefügt:

svg.append("defs") 
    .append("marker") 
    .attr("id", "arrow") 
    .attr("markerWidth", 10) 
    .attr("markerHeight", 10) 
    .attr("refX", 5) 
    .attr("refY", 5) 
    .attr("orient", "auto") 
    .attr("markerUnits", "strokeWidth") 
    .append("path") 
    .attr("d", "M0,0 L0,6 L9,3 z") 
    .attr("fill", "#000"); 

und dann den Marker-End-Attribut auf den Leitungen wie folgt hinzugefügt:

links = svg.selectAll("line.link") 
    .data(json.edges) 
    .enter().append("line") 
    .attr("class", "link") 
    .attr("marker-end", "url(#arrow)") 
    .attr("markerWidth", 5) 
    .attr("stroke", "#000") 
    .attr("stroke-width", 5) 
    .style("stroke", "#000") 
    .style("stroke-width", 2); 

Dies zeigt keine Pfeilenden.

Wenn ich fügen Sie den Marker-End-Attribut auf eine normale Zeile wie folgt:

svg.append("line") 
    .attr("x1", 50) 
    .attr("y1", 50) 
    .attr("x2", 100) 
    .attr("y2", 100) 
    .attr("stroke", "#000") 
    .attr("stroke-width", 5) 
    .attr("marker-end", "url(#arrow)"); 

es zeigt.

Answer 1

zuerst eine def für den Pfeil machen:

svg.append("svg:defs").append("svg:marker") 
    .attr("id", "arrow") 
    .attr("viewBox", "0 -5 10 10") 
    .attr('refX', -20)//so that it comes towards the center. 
    .attr("markerWidth", 5) 
    .attr("markerHeight", 5) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

Statt Linie einen Weg machen

links = svg.selectAll("line.link") 
    .data(json.edges) 
    .enter().append("path")//append path 
    .attr("class", "link") 
    .style("stroke", "#000") 
    .attr('marker-start', (d) -> "url(#arrow)")//attach the arrow from defs 
    .style("stroke-width", 2); 

schließlich d Attribut für den Pfad in tick Funktion

links 
    .attr("d", (d) -> "M" + d.source.x + "," + d.source.y + ", " + d.target.x + "," + d.target.y) 

Arbeits Code geben here