Jak narysować linię ze strzałkami między dwoma okręgami, podając:

Położenie środków cirlcesPromień kół

ja używamlinia iznacznik obiekty svg.

Jeśli narysuję strzałki do „środka” okręgu - strzałka jest niewidoczna. Jeśli przesunę strzałę zbyt daleko w tył - wtedy linia przejdzie przez i ukryje spiczasty koniec strzały (tutaj przesadzony dla lepszej widoczności):

Zgodnie z prośbą, oto odpowiednie bity mojego kodu (w lifecript):

# 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)"

Alternatywnie, oto JSFiddle z przykładu roboczego (zwróć uwagę, że strzałki są „wiercone”, aby wyglądać dokładnie w prawo):http://jsfiddle.net/yeQS2/