title: D3.js: rotate group, keep text the same orientation?
body: <p>I have the following data, relating to arrow strikes on a target:  </p>
  
  <pre><code>var data = [
      { name: "Bullseye", dist: 0, angle: 0 },   
      { name: "Strike 1", dist: 50, angle: 0 },   
      { name: "Strike 2", dist: 100, angle: 90 },    
      { name: "Strike 3", dist: 150, angle: 180 }   
  ];
  </code></pre>
  
  <p>And I would like to produce the following diagram of the arrow strikes with <a href="http://d3js.org/" rel="nofollow noreferrer">D3.js</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/Splg7.png" alt="enter image description here"></p>
  
  <p>I've got as far as putting circles and related text into a <code>g</code> element together, then rotating the <code>g</code> element. But I can't figure out how to keep the text at the same orientation: it gets rotated too. (I also can't figure out how to make the rotation work fully, but that's a different problem.)</p>
  
  <p>Here is a JSFiddle demonstrating the code I have tried, and the problem: <a href="http://jsfiddle.net/qzkv4/10/" rel="nofollow noreferrer">http://jsfiddle.net/qzkv4/10/</a></p>