title: D3 Zoomable Sunburst with data update
body: <p>D3.js experts,</p>
  
  <p>I'm working on a Zoomable Sunburst visualization in d3.js (<a href="http://bl.ocks.org/mbostock/4348373" rel="nofollow">http://bl.ocks.org/mbostock/4348373</a>) and I'm having trouble combining the zooming capabilities with a data update to the sunburst. So far, I'm able to get the arcs to transition correctly when the data changes, but if I try to zoom in after the data changes, the arcs don't transition properly.</p>
  
  <p>If I zoom into an arc before I switch the data, everything works fine. As soon as I change the data, zooming stops working.</p>
  
  <p>Heres's the tween function that I'm using for Zooming:</p>
  
  <pre><code>function arcTween(d) {
                  xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
                  yd = d3.interpolate(y.domain(), [d.y, 1]),
                  yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
                  return function(d, i) {
                      return i 
                      ? function(t) { return arc(d); }
                      : function(t) { x.domain(xd(t));         y.domain(yd(t)).range(yr(t)); return arc(d); };
                  };
              }
  </code></pre>
  
  <p>Here's a JSFiddle that illustrates the problem. 
  <a href="http://jsfiddle.net/shomewa/j9WnB/47/" rel="nofollow">http://jsfiddle.net/shomewa/j9WnB/47/</a></p>
  
  <p>To reproduce, change the form to Price and then try to Zoom in to an Arc by clicking on it.
  Does anybody know what's going on here? Thanks in advance.</p>