title: D3 force layout: rotating text
body: <p>I am using an example which was used to rotate a label in a d3's force layout. I am trying to display the label text '<strong>&lt;</strong>' such that A is displayed always &lt; B. Please refer the fiddle: <a href="http://jsfiddle.net/xr3917ac/4/" rel="nofollow noreferrer">http://jsfiddle.net/xr3917ac/4/</a></p>
  
  <p>However, as the node A is dragged in circular motion, the label text '<strong>&lt;</strong>' suddenly flips 180 degrees  displaying B &lt; A. How can this flip be avoided so that the A is displayed &lt; B always? The rotation angle of the label is calculated in tick():</p>
  
  <pre><code>const dsty = d.source.y - d.target.y;
  let angle = Math.atan(dsty / (d.source.x - d.target.x)) * 180 / Math.PI;
        return 'translate(' + [((d.source.x + d.target.x) / 2), ((d.source.y + d.target.y) / 2)] + ')rotate(' + angle + ')';
  </code></pre>