d3图表中饼图的使用示例

最新推荐文章于 2021-09-23 09:37:35 发布

小花橙色

最新推荐文章于 2021-09-23 09:37:35 发布

阅读量984

点赞数

本文链接：https://blog.csdn.net/qq_43682817/article/details/86841391

版权

d3是一款功能强大的数据可视化库，为我们提供了多种样式的数据显示格式，具体请参考官网：https://d3js.org/

饼状图是很常见的数据表格，可以清晰的展示各个部分占总体的多少。

效果图：在线演示：http://www.justforuse.cn/d3/d3.pie/
源代码右键查看即可。

这里写图片描述
首先需要引入d3.v3.js，我用的是v3版本，最新的是v4版本，有些函数用法有差异需要注意。

下面代码需要读者了解d3基础的语法，这里只简单的说下用法，另外一些需要自行查看API。

代码：

<body>    <script>    var width = 500,        height = 500;    var data = [10, 20, 50, 30, 80];    // sort函数自动隐式执行降序排列，而且数据从顶部开始顺时针展示，传入null可以阻止排序    var pie = d3.layout.pie().sort(null);    //定义了10中颜色主题    var color = d3.scale.category10();    var svg = d3.select("body").append("svg").attr("width", width + 100).attr("height", height + 100);    //定义外半径    var outerRadius = width / 2;    //定义内半径    var innerRadius = width / 4;    //定义路径    var arc = d3.svg.arc()        .innerRadius(innerRadius)        .outerRadius(outerRadius);    //定义了另一种路径函数    var arc2 = d3.svg.arc()        .innerRadius(innerRadius - 10)        .outerRadius(outerRadius + 20)    var arcs = svg.selectAll("g")        .data(pie(data))        .enter()        .append("g")        // 将饼图中心(SVG起点)移至中间        .attr("transform", "translate(" + (outerRadius+30)  + "," + (outerRadius+50) + ")")        //为每一块元素添加鼠标事件        .on("mouseover", function(d) {            d3.select(this).select("path").transition().attr("d", function(d) {                console.log(d);                return arc2(d);            })        })        .on("mouseout", function(d){            d3.select(this).select("path").transition().attr("d", function(d){                return arc(d);            })        })    arcs.append("path")        .attr("fill", function(d, i) {            return color(i);        })        .attr("d", function(d) {            return arc(d);        })    arcs.append("text")        .attr("transform", function(d) {            return "translate(" + arc.centroid(d) + ")";        })        .attr("text-anchor", "middle")        .text(function(d) {            return d.value;        })    </script></body>
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

d3的图标是用SVG画的，可能会很奇怪，body里也没有svg标签啊，但是注意这行代码：

var svg = d3.select("body").append("svg").attr("width", width + 100).attr("height", height + 100);
  
  1

是不是很像jQuery中的添加元素链式操作？这行代码就是在body元素内添加了svg元素，并为其设置了宽度和高度。

我们初始化了一组数据，var data = [10, 20, 50, 30, 80];，然后使用var pie = d3.layout.pie().sort(null); 设置了数据展现格式，pie()就是饼图结构。

var arcs = svg.selectAll("g")        .data(pie(data))        .enter()        .append("g")        // 将饼图中心(SVG起点)移至中间        .attr("transform", "translate(" + (outerRadius+30)  + "," + (outerRadius+50) + ")")
  
  1
2
3
4
5
6

这行操作将数据data进行了格式化操作pie(data)然后将它传给data()函数，这样我们就把数据传进了svg元素中，只需后面将它们“描绘”出来。其中的enter()函数为每个多出来的数据分配了g标签。

arcs.append("path")        .attr("fill", function(d,+ i) {            return color(i);        })        .attr("d", function(d) {            return arc(d);        })    arcs.append("text")        .attr("transform", function(d) {            return "translate(" + arc.centroid(d) + ")";        })        .attr("text-anchor", "middle")        .text(function(d) {            return d.value;        })
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这两行代码分别在svg元素中按照传进来的格式化后的data描绘出他们的区域(path)以及添加文本内容(text)。

另外我们还为没个元素添加了鼠标移入和鼠标移除事件：

.on("mouseover", function(d) {       d3.select(this).select("path").transition().attr("d", function(d) {                console.log(d);                return arc2(d);            })        })        .on("mouseout", function(d){            d3.select(this).select("path").transition().attr("d", function(d){                return arc(d);            })        })
  
  1
2
3
4
5
6
7
8
9
10
11