source: Dev/trunk/d3/examples/partition/partition-sunburst.js @ 76

Last change on this file since 76 was 76, checked in by fpvanagthoven, 14 years ago

d3

File size: 1.9 KB
Line 
1var w = 960,
2    h = 700,
3    r = Math.min(w, h) / 2,
4    color = d3.scale.category20c();
5
6var vis = d3.select("#chart").append("svg:svg")
7    .attr("width", w)
8    .attr("height", h)
9  .append("svg:g")
10    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
11
12var partition = d3.layout.partition()
13    .sort(null)
14    .size([2 * Math.PI, r * r])
15    .value(function(d) { return 1; });
16
17var arc = d3.svg.arc()
18    .startAngle(function(d) { return d.x; })
19    .endAngle(function(d) { return d.x + d.dx; })
20    .innerRadius(function(d) { return Math.sqrt(d.y); })
21    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
22
23d3.json("../data/flare.json", function(json) {
24  var path = vis.data([json]).selectAll("path")
25      .data(partition.nodes)
26    .enter().append("svg:path")
27      .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
28      .attr("d", arc)
29      .attr("fill-rule", "evenodd")
30      .style("stroke", "#fff")
31      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
32      .each(stash);
33
34  d3.select("#size").on("click", function() {
35    path
36        .data(partition.value(function(d) { return d.size; }))
37      .transition()
38        .duration(1500)
39        .attrTween("d", arcTween);
40
41    d3.select("#size").classed("active", true);
42    d3.select("#count").classed("active", false);
43  });
44
45  d3.select("#count").on("click", function() {
46    path
47        .data(partition.value(function(d) { return 1; }))
48      .transition()
49        .duration(1500)
50        .attrTween("d", arcTween);
51
52    d3.select("#size").classed("active", false);
53    d3.select("#count").classed("active", true);
54  });
55});
56
57// Stash the old values for transition.
58function stash(d) {
59  d.x0 = d.x;
60  d.dx0 = d.dx;
61}
62
63// Interpolate the arcs in data space.
64function arcTween(a) {
65  var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
66  return function(t) {
67    var b = i(t);
68    a.x0 = b.x;
69    a.dx0 = b.dx;
70    return arc(b);
71  };
72}
Note: See TracBrowser for help on using the repository browser.