|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Pie Chart</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="../../d3.layout.js"></script> |
|
7 <style type="text/css"> |
|
8 |
|
9 body { |
|
10 font: 10px sans-serif; |
|
11 } |
|
12 |
|
13 </style> |
|
14 </head> |
|
15 <body> |
|
16 <script type="text/javascript"> |
|
17 |
|
18 var w = 400, |
|
19 h = 400, |
|
20 r = Math.min(w, h) / 2, |
|
21 data = d3.range(10).map(Math.random), |
|
22 color = d3.scale.category20(), |
|
23 donut = d3.layout.pie(), |
|
24 arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r); |
|
25 |
|
26 var vis = d3.select("body") |
|
27 .append("svg:svg") |
|
28 .data([data]) |
|
29 .attr("width", w) |
|
30 .attr("height", h); |
|
31 |
|
32 var arcs = vis.selectAll("g.arc") |
|
33 .data(donut) |
|
34 .enter().append("svg:g") |
|
35 .attr("class", "arc") |
|
36 .attr("transform", "translate(" + r + "," + r + ")"); |
|
37 |
|
38 arcs.append("svg:path") |
|
39 .attr("fill", function(d, i) { return color(i); }) |
|
40 .attr("d", arc); |
|
41 |
|
42 arcs.append("svg:text") |
|
43 .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
|
44 .attr("dy", ".35em") |
|
45 .attr("text-anchor", "middle") |
|
46 .attr("display", function(d) { return d.value > .15 ? null : "none"; }) |
|
47 .text(function(d, i) { return d.value.toFixed(2); }); |
|
48 |
|
49 </script> |
|
50 </body> |
|
51 </html> |