1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>饼状图</title> 6 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 7 <style> 8 svg { 9 width: 600px; 10 height: 600px; 11 display: block; 12 margin: 100px auto; 13 } 14 15 text { 16 fill: #fff; 17 } 18 </style> 19 </head> 20 <body> 21 <svg></svg> 22 </body> 23 </html> 24 <script> 25 var svg = d3.select('svg'); 26 var color = d3.scale.category10(); 27 28 var dataset = [30, 10, 43, 55, 13]; 29 // 这样的值是不能直接绘制图形的，例如绘制饼图的一部分，需要知道一段弧度的起始位置和终止角度，这些值都不存在于数组的dataset中，因此需要用到布局 30 // 布局的作用就是：计算出适合于作图的数据 31 var pie = d3.layout.pie(); 32 var piedata = pie(dataset) 33 console.log(piedata)//5个整数倍转换成了5个对象，每个对象都有：起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。 34 // 绘制图形 35 // 为了根据转换后的piedata绘图，还需要一样工具：生成器 36 // 弧生成器 37 var outerRadius = 150; 38 var innerRadius = 100; 39 var arc = d3.svg.arc()//弧生成器； 40 .innerRadius(innerRadius)//设置内半径 41 .outerRadius(outerRadius)//设置外半径 42 // 先添加g，再添加path 43 var arcs = svg.selectAll('g') 44 .data(piedata) 45 .enter() 46 .append('g') 47 .attr("transform", "translate(200,200)"); 48 // 接下来给每个g添加path 49 arcs.append('path') 50 .attr('fill', function (d, i) { 51 return color(i) 52 }) 53 .attr('d', function (d) { 54 return arc(d) 55 }) 56 // 添加文本 57 arcs.append("text") 58 .attr("transform", function (d) { 59 return "translate(" + arc.centroid(d) + ")"; 60 }) 61 .attr("text-anchor", "middle")//水平居中； 62 .text(function (d) { 63 return d.data; 64 }); 65 66 67 </script>