¿Cómo puedo dibujar una línea con flecha entre dos círculos, dado:

Localización de los centros de los cirlces.Radio de los circulos

estoy usandolínea ymarcador svg objetos.

Si dibujo las flechas hacia el "centro" del círculo, entonces la flecha es invisible. Si muevo la flecha demasiado atrás, entonces la línea se muestra a través y oculta el extremo puntiagudo de la flecha (aquí exagerada para una mejor visibilidad):

Según la solicitud, aquí están los bits relevantes de mi código (en 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)"

Alternativamente, aquí está JSFiddle del ejemplo de trabajo (tenga en cuenta que las flechas están "movidas" para que se vean a la derecha):http://jsfiddle.net/yeQS2/