title: Rotation with transition
body: <p>As stated in previous questions (for example <a href="https://stackoverflow.com/questions/10985077/d3-js-odd-rotation-behavior">d3.js Odd Rotation Behavior</a>), when you want to rotate an SVG object on its place you should use</p>
  
  <pre><code>.attr('transform','rotate(45,100,100)')
  </code></pre>
  
  <p>where the first number is the rotation degrees, and the other two are the coordinates of the rotation origin.</p>
  
  <p>The problem here is that I want to execute the rotation inside a transition:</p>
  
  <pre><code>.transition()
  .attr('transform', 'rotate(45,100,100)')
  .duration(300)
  </code></pre>
  
  <p>and I get a strange behaviour, I can see a translation before the expected rotation.
  You can see the result here: <a href="http://jsfiddle.net/uwM8u/121/" rel="nofollow noreferrer">http://jsfiddle.net/uwM8u/121/</a></p>
  
  <p>Is there a better way to obtain this?</p>