d3绘制饼状图 

 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>

 

posted @ 2019-01-23 16:14  前端极客  阅读(1255)  评论(0)  编辑  收藏  举报