0

D3.js experts,

I'm working on a Zoomable Sunburst visualization in d3.js (http://bl.ocks.org/mbostock/4348373) 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.

If I zoom into an arc before I switch the data, everything works fine. As soon as I change the data, zooming stops working.

Heres's the tween function that I'm using for Zooming:

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); };
                };
            }

Here's a JSFiddle that illustrates the problem. http://jsfiddle.net/shomewa/j9WnB/47/

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.

4

0 回答 0