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/treeRemapper.js

My approach is based on this example -

http://bl.ocks.org/mbostock/4348373

For some reason my zoom and tweening is not working -

var width = 960, height = 700,
    radius = Math.min(width, height) / 2,
    color = d3.scale.category20c();

var x = d3.scale.linear().range([0, 2 * Math.PI]),
    y = d3.scale.sqrt().range([0, radius]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");

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

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

d3.json("data/getJson.php", function(error, data) {

var treeData = genJSON(data, ['SourceID', 'ProviderID']);

var path = svg.selectAll("path")
    .data(partition.nodes(treeData))
    .enter().append("path")
    .attr("d", arc)
    .style("fill-rule", "evenodd")
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
     .on("click", click);

  function click(d) {
    path.transition()
      .duration(750)
      .attrTween("d", arcTween(d));
  }

});

function arcTween(d) {
  var 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); };
  };
}

Can anyone tell me what I'm doing wrong?

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