在两个圆之间画一个箭头？

如何在两个圆之间绘制箭头线，给定：

1. 圆心的位置
2. 圆的半径

我在用line and markersvg 对象。

If I draw the arrows to the "center" of the circle - then the arrow is invisible. If I move the arrow too far back - then the line shows through and hides the pointy end of the arrow (here exaggerated for better visibility):

根据要求，这是我的代码的相关部分（在 livescript 中）：

# Draw an arrow to use for lines
svg.append("svg:defs")
 .append("svg:marker")
  .attr("id", "arrow")
  .attr("viewBox", "0 0 10 10")
  .attr("refX", 27)
  .attr("refY", 5)
  .attr("markerUnits", "strokeWidth")
  .attr("markerWidth", 8)
  .attr("markerHeight", 6)
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M 0 0 L 10 5 L 0 10 z")

svg.append("line")
 .attr "x1" 5 
 .attr "x2" 50 
 .attr "y1" 5 
 .attr "y2" 50
 .style "stroke" "black"
 .attr "stroke-width" 2
 .attr "marker-end" "url(\#arrow)"

或者，这里是工作示例的 JSFiddle（请注意，箭头“坐立不安”，看起来恰到好处）：http://jsfiddle.net/yeQS2/

如果我理解正确，您需要找到需要添加到源以到达目标圆的边界的 2D 矢量。

伪代码：

d = distance between A and B; // (sqrt((xB-xA)² + (yB-yA)²)).
d2 = d - radius;

ratio = d2 / d;

dx = (xB - xA) * ratio;
dy = (yB - yA) * ratio;

x = xA + dx;
y = yA + dy;