title: How to do smooth transition for map reprojection in d3 js
body: <p>I'd like to do a smooth transition between alber/orthographic in a mini app I am building, much like this example: </p>
  
  <p><a href="http://mbostock.github.io/d3/talk/20111018/#27">http://mbostock.github.io/d3/talk/20111018/#27</a></p>
  
  <p>It seems like this smooth transition is broken in v3 however, with a rather choppy transition of the map paths: </p>
  
  <p><a href="https://www.evernote.com/shard/s236/sh/46b002bd-9c5b-4e9b-87ef-270c303eb677/2eaeebb267a3fc59df5a8447bbbcc58b/res/37917835-5aad-4509-b534-31a3e3034762/Worst_Tornado_Outbreaks_of_All_Time-20130611-074050.jpg.jpg?resizeSmall&amp;width=832">https://www.evernote.com/shard/s236/sh/46b002bd-9c5b-4e9b-87ef-270c303eb677/2eaeebb267a3fc59df5a8447bbbcc58b/res/37917835-5aad-4509-b534-31a3e3034762/Worst_Tornado_Outbreaks_of_All_Time-20130611-074050.jpg.jpg?resizeSmall&amp;width=832</a></p>
  
  <p>Code is pretty straight forward, I initialize the map as albers, then run ortho() to update it. </p>
  
  <pre><code>function ortho() {
    var self = this, 
      h = 1000,
      w = document.width;
  
    this.projection = d3.geo.orthographic()
      .scale(500)
      .translate([ (w - 300) / 2, h / 2])
      .clipAngle(90)
      .rotate([90, 0, 0])
      .precision(.1);
  
    this.path = d3.geo.path()
      .projection(this.projection);
  
    //update path WITH transition
    d3.selectAll('path')
      .transition()
      .duration(900)
      .attr('d', app.path);
  
  }
  </code></pre>
  
  <p>The map changes from albers to orthographic, but the transition is not smooth. Any thoughts would be great. </p>