2023学年完整公开课版饼图

主讲：孟繁兴0102目录饼图制作饼图饼图1饼图饼图显示一个数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）中各项的大小与各项总和的比例。[["小米",60.8],["三星",58.4],["联想",47.3],["苹果",46.6],["华为",41.3],["酷派",40.1],["其他",111.5]]制作饼图2添加SVGvarcenter=[[0.5,0.5],[0.7,0.8],[0.4,0.9],

[0.11,0.32],[0.88,0.25],[0.75,0.12],

[0.5,0.1],[0.2,0.3],[0.6,0.7]];

varwidth=500;

varheight=500;

varpadding={top:30,bottom:30,left:80,right:80};

varsvg=d3.select("body")

.append("svg")

.attr("width",width)

.attr("height",height);准备数据vardataset=[["小米",60.8],["三星",58.4],["联想",47.3],["苹果",46.6],

["华为",41.3],["酷派",40.1],["其他",111.5]];

varsumData=d3.sum(dataset,function(d){

returnd[1];

});

varpie=d3.layout.pie()

.value(function(d){

returnd[1];

});

varcolor=d3.scale.category20();

vararcPath=d3.svg.arc()

.innerRadius(0)

.outerRadius(150);

varfinalData=pie(dataset);绘制饼图vararcs=svg.selectAll(".arc")

.data(finalData)

.enter()

.append("g")

.attr("class","arc")

.attr("transform","translate(250,200)");

arcs.append("path")

.attr("d",function(d){

returnarcPath(d);

})

.attr("stroke","white")

.attr("fill",function(d,i){

returncolor(i);

});添加图内文字arcs.append("text")

.attr("transform",function(d,i){

varx=arcPath.centroid(d)[0]*1.2;

vary=arcPath.centroid(d)[1]*1.2;

return"translate("+x+","+y+")";

})

.text(function(d){

varvalue=Number(d.value)/sumData*100;

returnvalue.toFixed(1)+"%";

})

.attr("text-anchor","middle")

.attr("fill","black");添加图外文字及连接线arcs.append("line")

.attr("x1",function(d){

returnarcPath.centroid(d)[0]*2;

})

.attr("y1",function(d){

returnarcPath.centroid(d)[1]*2;

})

.attr("x2",function(d){

returnarcPath.centroid(d)[0]*2.2;

})

.attr("y2",function(d){

returnarcPath.centroid(d)[1]*2.2;

})

.attr("stroke","black");

arcs.append("text")

.attr("transform",function(d){

varx=arcPath.centroid(d)[0]*2.4;

vary=arcPath.centroid(d)[1]*2.5;

return"translate("+x+","+y