title: D3 force layout: Moving arrows along links depending on node radius
body: <p>In this <code>D3</code> <a href="http://jsfiddle.net/mLtr1u4n/" rel="nofollow noreferrer">example</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/NMJ7H.jpg" alt="enter image description here"></p>
  
  <p>nodes have variable radius. I managed to move node labels so that they are always just next to their circles.</p>
  
  <p>However, how to move arrows? (You can see that for Microsoft, Apple etc, they are almost covered by the circle)</p>
  
  <p>Related questions:</p>
  
  <p><a href="https://stackoverflow.com/questions/15495762/linking-nodes-of-variable-radius-with-arrows?rq=1">here</a></p>
  
  <p><a href="https://stackoverflow.com/questions/16660193/get-arrowheads-to-point-at-outer-edge-of-node-in-d3?rq=1">here</a></p>
  
  <p><a href="https://stackoverflow.com/questions/13165913/draw-an-arrow-between-two-circles/20909533#20909533">here</a></p>
  
  <p><a href="https://stackoverflow.com/questions/18070495/how-can-i-dynamically-change-the-position-and-the-size-of-direction-arrows-on-a/26616366#26616366">here</a></p>