d3 drawing arrows tips

Question

In this example :

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

If I enlarge the circles, 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)

What is the best way to properly adjust the drawing of the arrow so that it points to the radius of the circle ?

Thanks

Answer 1

You asked for the "best way to properly adjust the drawing of the arrow ". I cannot claim the following approach is the "best" way, and I look forward to other answers, but here is one method to tackle this issue.

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

Relevant updates are noted below.

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