如何动态更改定向 d3.js 力布局上方向箭头的位置和大小？

我目前正在我的力布局中实现箭头，如本示例中所做的那样（http://bl.ocks.org/mbostock/1153292）并且效果很好。然而，人们很快就会意识到箭头的位置和大小在这里是硬编码的，因为节点的大小永远不会改变。

我有一个图表，我动态更改节点大小，因此我希望箭头相应更新，否则它们会被节点覆盖或覆盖节点或只是不附加到节点。

我只找到一篇帖子（用箭头连接可变半径的节点）谈论这个问题。然而，它没有得到回答，并且一张海报给出的答案是让边缘结束于节点的半径而不是中心，这不是我想做的事情。这需要不断地重新计算边缘位置，考虑到我拥有的边缘数量，这是不切实际的。

我认为这会相对简单，但一直无法弄清楚。我当前正在进行的更改是将标记创建移到节点生成下方，因为否则无法获取节点大小数据，除非我想运行我正在使用的大小方法，这将是巨大的浪费处理能力（我有数百个节点）。

我正在尝试什么（粗略的例子，我的代码有点复杂）

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return d.target.nodeID; });

var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
      .enter().append("svg:circle")
    .attr("r", nodeSize) //Dynamically determine size
    .call(force.drag);

// Per-node markers, as each node could potentially have a unique size
svg.append("svg:defs").selectAll("marker")
    .data(nodes, function(d) { return d.nodeID; })
  .enter().append("svg:marker")
    .attr("id", function(d) { return d.nodeID; })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", function(d) { return d.r; }) //Offset by the radius of the node
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

//Now that we know radius data for nodes, add the arrows in
path.each(function(d) { 
    d.attr("marker-end", function(d) { return "url(#" + d.target.nodeID + ")"; })
});

有人知道解决这个问题的最佳方法吗？提前致谢！

更新：根据请求，我创建了一个 jsfiddle （http://jsfiddle.net/herbstmb/j5wJ7/）。这是一个基本的力布局，我正在尝试让动态箭头大小发挥作用。

这是一个老问题，但这是我的解决方案。这个想法是绘制连接节点的路径，使得端点位于节点的边缘而不是节点的中心。从移动专利诉讼的例子开始（http://bl.ocks.org/mbostock/1153292），我将 linkArc 方法替换为：

function drawCurve(d) {
    var sourceX = d.source.x;
    var sourceY = d.source.y;
    var targetX = d.target.x;
    var targetY = d.target.y;

    var theta = Math.atan((targetX - sourceX) / (targetY - sourceY));
    var phi = Math.atan((targetY - sourceY) / (targetX - sourceX));

    var sinTheta = d.source.r * Math.sin(theta);
    var cosTheta = d.source.r * Math.cos(theta);
    var sinPhi = d.target.r * Math.sin(phi);
    var cosPhi = d.target.r * Math.cos(phi);

    // Set the position of the link's end point at the source node
    // such that it is on the edge closest to the target node
    if (d.target.y > d.source.y) {
        sourceX = sourceX + sinTheta;
        sourceY = sourceY + cosTheta;
    }
    else {
        sourceX = sourceX - sinTheta;
        sourceY = sourceY - cosTheta;
    }

    // Set the position of the link's end point at the target node
    // such that it is on the edge closest to the source node
    if (d.source.x > d.target.x) {
        targetX = targetX + cosPhi;
        targetY = targetY + sinPhi;    
    }
    else {
        targetX = targetX - cosPhi;
        targetY = targetY - sinPhi;   
    }

    // Draw an arc between the two calculated points
    var dx = targetX - sourceX,
        dy = targetY - sourceY,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + sourceX + "," + sourceY + "A" + dr + "," + dr + " 0 0,1 " + targetX + "," + targetY;
}

请注意，此代码期望节点数据中包含“r”或半径属性。这相当于 jsfiddle 中的 size 属性。如果您想将链接绘制为直线，则可以返回此字符串：

return "M" + sourceX + "," + sourceY + "L" + targetX + "," + targetY;

为了将箭头点放置在正确的位置，我更改了 refX 和 refY 属性，使箭头点位于节点的边缘：

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