d3繪製餅狀圖

時間 2019-11-06

標籤 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。