1 | var w = 960, |
---|
2 | h = 700, |
---|
3 | r = Math.min(w, h) / 2, |
---|
4 | color = d3.scale.category20c(); |
---|
5 | |
---|
6 | var 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 | |
---|
12 | var partition = d3.layout.partition() |
---|
13 | .sort(null) |
---|
14 | .size([2 * Math.PI, r * r]) |
---|
15 | .value(function(d) { return 1; }); |
---|
16 | |
---|
17 | var 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 | |
---|
23 | d3.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. |
---|
58 | function stash(d) { |
---|
59 | d.x0 = d.x; |
---|
60 | d.dx0 = d.dx; |
---|
61 | } |
---|
62 | |
---|
63 | // Interpolate the arcs in data space. |
---|
64 | function 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 | } |
---|