0

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?

Colin
  • 930
  • 3
  • 19
  • 42

1 Answers1

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

Pinguin Dirk
  • 1,433
  • 11
  • 18
  • Wow. Thank you. I would never have got to a solution without this. Have you come across a good resource that explains to laymen, what the math is doing in these examples? The documentation is a little terse.. – Colin Nov 21 '14 at 14:39
  • Cool! I suggest you modify the constants a bit and see how the formula reacts. From there, you can start by deconstructing it (for instance, what does `d.x` stand for? What is `x(d.x)` then? etc) Try the formulas in the console, get a feel for it :) – Pinguin Dirk Nov 21 '14 at 15:15