D3 рисование стрелок советы

В этом примере:

Если я увеличиваю круги, например:

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)

Каков наилучший способ правильной настройки рисунка стрелки так что он указывает на радиус круга?

Спасибо

Ответ 1

Вы попросили "лучший способ правильно отрегулировать рисунок стрелки". Я не могу утверждать, что следующий подход является "лучшим" способом, и я с нетерпением жду других ответов, но вот один из способов решения этой проблемы.

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

Ниже приведены соответствующие обновления.

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