本文主要是介绍D3.js之饼图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一.绘制饼图的步骤：
- 添加svg并添加svg属性(width, height);
<script type="text/javascript">var width = 400; //设置svg区域的宽度var height = 400; //设置svg区域的高度var svg = d3.select('body') //选择body区.append('svg') //在body中添加svg.attr('width', width) //将宽度赋给width属性.attr('height', height); //将高度赋给height属性</script> - 确定初始数据；
//确定初始数据var dataset = [['小米', 22.5], ['华为', 32.7], ['中兴', 14.2], ['努比亚', 22.1], ['联想', 14.2], ['其他', 10.3]]; - 转换数据；
//转换数据var pie = d3.layout.pie().value(function (d) { return d[1]; });var piedata = pie(dataset);console.log(piedata); - 绘制；
- 外半径和内半径
//外半径和内半径var outerRadius = width / 3;var innerRadius = 0; - 创建弧生成器
//创建弧生成器var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);var color = d3.scale.category20();- 添加对应数目的弧组，即<g>元素
var arcs = svg.selectAll('g').data(piedata) //绑定转换后的数据，即piedata.enter().append('g').attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');- 添加弧的路径元素
//添加弧的路径元素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) {var x = arc.centroid(d)[0] * 1.4; //文字的x坐标var y = arc.centroid(d)[1] * 1.4; //文字的y坐标return 'translate(' + x + ',' + y + ')';}).attr('text-anchor', 'middle').text(function(d) {//计算市场份额和百分比var percent = Number(d.value) / d3.sum(dataset, function(d) { return d[1]; }) * 100;//保留一个小数点，末尾加一个百分号返回return percent.toFixed(1) + '%';});效果图：
- 添加连接弧外的直线元素
//添加连接弧外的直线元素arcs.append('line').attr('stroke', 'black').attr('x1', function(d) { return arc.centroid(d)[0] * 2; }).attr('y1', function(d) { return arc.centroid(d)[1] * 2; }).attr('x2', function(d) { return arc.centroid(d)[0] * 2.2; }).attr('y2', function(d) { return arc.centroid(d)[1] * 2.2; });效果图：
- 添加弧外的文字元素
arcs.append('text').attr('transform', function(d) {var x = arc.centroid(d)[0] * 2.5;var y = arc.centroid(d)[1] * 2.5;return 'translate(' + x + ',' + y + ')';}).attr('text-anchor', 'middle').text(function(d) {return d.data[0];});效果图：
全部代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcss.com/d3/3.2.1/d3.js"></script>
</head>
<body><script type="text/javascript">var width = 400; //设置svg区域的宽度var height = 400; //设置svg区域的高度var svg = d3.select('body') //选择body区.append('svg') //在body中添加svg.attr('width', width) //将宽度赋给width属性.attr('height', height); //将高度赋给height属性//确定初始数据var dataset = [['小米', 22.5], ['华为', 32.7], ['中兴', 14.2], ['努比亚', 22.1], ['联想', 14.2], ['其他', 10.3]];//转换数据var pie = d3.layout.pie().value(function (d) { return d[1]; });var piedata = pie(dataset);console.log(piedata);//外半径和内半径var outerRadius = width / 3;var innerRadius = 0;//创建弧生成器var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);var color = d3.scale.category20();//添加对应数目的弧组，即<g>元素var arcs = svg.selectAll('g').data(piedata).enter().append('g').attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');//添加弧的路径元素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) {var x = arc.centroid(d)[0] * 1.4; //文字的x坐标var y = arc.centroid(d)[1] * 1.4; //文字的y坐标return 'translate(' + x + ',' + y + ')';}).attr('text-anchor', 'middle').text(function(d) {//计算市场份额和百分比var percent = Number(d.value) / d3.sum(dataset, function(d) { return d[1]; }) * 100;//保留一个小数点，末尾加一个百分号返回return percent.toFixed(1) + '%';});//添加连接弧外的直线元素arcs.append('line').attr('stroke', 'black').attr('x1', function(d) { return arc.centroid(d)[0] * 2; }).attr('y1', function(d) { return arc.centroid(d)[1] * 2; }).attr('x2', function(d) { return arc.centroid(d)[0] * 2.2; }).attr('y2', function(d) { return arc.centroid(d)[1] * 2.2; });//添加弧外的文字元素arcs.append('text').attr('transform', function(d) {var x = arc.centroid(d)[0] * 2.5;var y = arc.centroid(d)[1] * 2.5;return 'translate(' + x + ',' + y + ')';}).attr('text-anchor', 'middle').text(function(d) {return d.data[0];});</script>
</body>
</html>
这篇关于D3.js之饼图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
