|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|
5 <title>Partition - Sunburst</title> |
|
6 <script type="text/javascript" src="../../d3.js"></script> |
|
7 <script type="text/javascript" src="../../d3.layout.js"></script> |
|
8 <style type="text/css"> |
|
9 |
|
10 path { |
|
11 stroke: #fff; |
|
12 fill-rule: evenodd; |
|
13 } |
|
14 |
|
15 </style> |
|
16 </head> |
|
17 <body> |
|
18 <div id="chart"></div> |
|
19 <script type="text/javascript"> |
|
20 |
|
21 var w = 960, |
|
22 h = 700, |
|
23 r = Math.min(w, h) / 2, |
|
24 x = d3.scale.linear().range([0, 2 * Math.PI]), |
|
25 y = d3.scale.sqrt().range([0, r]), |
|
26 color = d3.scale.category20c(); |
|
27 |
|
28 var vis = d3.select("#chart").append("svg:svg") |
|
29 .attr("width", w) |
|
30 .attr("height", h) |
|
31 .append("svg:g") |
|
32 .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")"); |
|
33 |
|
34 var partition = d3.layout.partition() |
|
35 .value(function(d) { return d.size; }); |
|
36 |
|
37 var arc = d3.svg.arc() |
|
38 .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) |
|
39 .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) |
|
40 .innerRadius(function(d) { return Math.max(0, y(d.y)); }) |
|
41 .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); |
|
42 |
|
43 d3.json("../data/flare.json", function(json) { |
|
44 var path = vis.data([json]).selectAll("path") |
|
45 .data(partition.nodes) |
|
46 .enter().append("svg:path") |
|
47 .attr("d", arc) |
|
48 .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) |
|
49 .on("click", click); |
|
50 |
|
51 function click(d) { |
|
52 path.transition() |
|
53 .duration(750) |
|
54 .attrTween("d", arcTween(d)); |
|
55 } |
|
56 }); |
|
57 |
|
58 // Interpolate the scales! |
|
59 function arcTween(d) { |
|
60 var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), |
|
61 yd = d3.interpolate(y.domain(), [d.y, 1]), |
|
62 yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]); |
|
63 return function(d, i) { |
|
64 return i |
|
65 ? function(t) { return arc(d); } |
|
66 : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; |
|
67 }; |
|
68 } |
|
69 |
|
70 </script> |
|
71 </body> |
|
72 </html> |