disegno d3 frecce suggerimenti

Question

In questo esempio:

http://jsfiddle.net/maxl/mNmYH/2/

Se io allargo i cerchi, ex:

var radius = 30; // (is 6 in the jsFiddle) 
var circle = svg.append("svg:g").selectAll("circle") 
.data(force.nodes()) 
.enter().append("svg:circle") 
.attr("r", radius) 

Qual è il modo migliore per regolare correttamente il disegno della freccia così che punta al raggio del cerchio?

Grazie

Answer 1

hai chiesto il "modo migliore per regolare correttamente il disegno della freccia". Non posso affermare che il seguente approccio sia il "migliore", e attendo altre risposte, ma ecco un metodo per affrontare questo problema.

http://jsfiddle.net/Y9Qq3/2/

aggiornamenti rilevanti sono riportati di seguito.

... 
var w = 960, 
    h = 500 
    markerWidth = 6, 
    markerHeight = 6, 
    cRadius = 30, // play with the cRadius value 
    refX = cRadius + (markerWidth * 2), 
    refY = -Math.sqrt(cRadius), 
    drSub = cRadius + refY; 

... 
svg.append("svg:defs").selectAll("marker") 
    .data(["suit", "licensing", "resolved"]) 
    .enter().append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", refX) 
    .attr("refY", refY) 
    .attr("markerWidth", markerWidth) 
    .attr("markerHeight", markerHeight) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5");  

... 
function tick() { 
    path.attr("d", function (d) { 
     var dx = d.target.x - d.source.x, 
      dy = (d.target.y - d.source.y), 
      dr = Math.sqrt(dx * dx + dy * dy); 
     return "M" + d.source.x + "," + d.source.y + "A" + (dr - drSub) + "," + (dr - drSub) + " 0 0,1 " + d.target.x + "," + d.target.y; 
    }); 
...