L'introduzione di Arrow (diretto), in forza diretta grafico d3

Question

Sto usando il grafico di forza diretta nel campione qui - http://bl.ocks.org/mbostock/4062045

Ma dal momento che la mia tecnica è diretto, ho bisogno dei collegamenti nel grafico a essere rappresentato come collegamenti a freccia. Forse piace, http://bl.ocks.org/d3noob/5141278.

Qualcuno può suggerire le modifiche o integrazioni che creano un grafo orientato come in http://bl.ocks.org/mbostock/4062045

Sono nuovo di D3, e non sono riuscito a trovare una soluzione, forse il suo banale, ma un piccolo aiuto è apprezzato.

Answer 1

Unire questi due esempi è semplice, e ho creato un JSFiddle to demo. In primo luogo, aggiungere la definizione dello stile freccia a 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"); 

Poi basta aggiungere il marcatore al links

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

Si finisce con qualcosa di simile:

vedrai che alcune frecce sono più grandi di altri, perché non tutti i link hanno lo stesso stroke-width. Se si vuole fare in tutte le frecce della stessa dimensione, basta modificare

.style("stroke-width", function(d) { return Math.sqrt(d.value); }) 

quando si aggiungono i collegamenti.