[76] | 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 | } |
---|