D3.js Zoomable Sunburst not Zooming

Question

I have a static 3 level Sunburst diagram -

http://colinwhite.net/Sunburst/

My data is being nested with this function

http://colinwhite.net/Sunburst/js/t

Answer 1

The example you are quoting is based on the "rescaling"/"readjusting" x and y domain/ranges. In your example, you have defined an arc that does not depend on the x and y scales, thus if you change these, there's no effect.

So what can you do?

First you need to take out the size of the partition (as you will handle that with scales):

var partition = d3.layout.partition()
        //.size([2 * Math.PI, radius * radius])
        .value(function(d) {
            return 1;
        });

(remove it, not comment it :) )

Next, you have to use and arc that does depend on the scales, e.g. like in the example:

var arc = d3.svg.arc()
        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
        .innerRadius(function(d) { return Math.max(0, y(d.y)); })
        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

As you can see, the max and min are kind of squeezing the "hidden" segments...

Cross fingers, run it (I tried it with flare.json, it did work here)

Note

If you plan to also add reweighting when zoomed in, have a look at this nice example: http://bl.ocks.org/kerryrodden/477c1bfb081b783f80adof