d3 rysunek strzałki wskazówki

Question

w poniższym przykładzie:

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

Gdybym powiększyć kręgi, 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) 

Jaki jest najlepszy sposób, aby odpowiednio dostosować rysunek strzałki tak że wskazuje na promień koła?

Dzięki

Answer 1

Pytałeś za „najlepszy sposób prawidłowo wyregulować rysunek strzałki”. Nie mogę twierdzić, że następujące podejście jest "najlepsze", i czekam na inne odpowiedzi, ale tutaj jest jedna metoda rozwiązania tego problemu.

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

odpowiednie aktualizacje są wypisane poniżej.

... 
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; 
    }); 
...