Introducing Pfeil (Regie), in Kraft Directed Graph d3

Question

ich die Kraft-gerichteten Graphen hier in der Probe bin mit - http://bl.ocks.org/mbostock/4062045

Aber da meine Daten gerichtet ist, muss ich die Links in der Grafik als dargestellt werden Pfeilverbindungen. Vielleicht wie in, http://bl.ocks.org/d3noob/5141278.

Kann jemand bitte die Änderungen oder Ergänzungen vorschlagen, die einen gerichteten Graphen wie in http://bl.ocks.org/mbostock/4062045

Ich bin neu in D3 schaffen, und ich konnte nicht eine Lösung, vielleicht ist es trivial, aber ein wenig Hilfe geschätzt finden.

Answer 1

Das Zusammenführen dieser beiden Beispiele ist einfach und ich habe eine JSFiddle to demo erstellt. Fügen Sie zunächst die Definition des Pfeilart zum SVG:

// build the arrow. 
svg.append("svg:defs").selectAll("marker") 
    .data(["end"])  // Different link/path types can be defined here 
    .enter().append("svg:marker") // This section adds in the arrows 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

Dann fügen Sie einfach den Marker auf Ihre links

.attr("marker-end", "url(#end)"); 

Sie am Ende mit etwas wie folgt aus:

Sie werden sehen, dass einige Pfeile größer als andere sind, weil nicht alle Links die gleichen stroke-width haben. Wenn Sie alle Pfeile auf die gleiche Größe bringen möchten, ändern Sie einfach

beim Hinzufügen der Links.