Как я могу нарисовать линию со стрелкой между двумя кругами, учитывая:

Расположение центров цирковРадиус кругов

я используюлиния а такжемаркер SVG объекты.

Если я нарисую стрелки нацентр" круга - тогда стрелка невидима. Если я переместлю стрелку слишком далеко назад, то линия просвечивает и прячет острый конец стрелки (здесь преувеличено для лучшей видимости):

Согласно запросу, вот соответствующие биты моего кода (в сценарии жизни):

# 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/