d3绘制箭头提示

Question

在这个例子中:

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

如果我放大圆圈,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)

正确调整箭头绘图以使其指向圆的半径的最佳方法是什么？

谢谢

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