2023學年完整公開課版餅圖

主講：孟繁興0102目錄餅圖制作餅圖餅圖1餅圖餅圖顯示一個數(shù)據(jù)系列（數(shù)據(jù)系列：在圖表中繪制的相關數(shù)據(jù)點，這些數(shù)據(jù)源自數(shù)據(jù)表的行或列。圖表中的每個數(shù)據(jù)系列具有唯一的顏色或圖案并且在圖表的圖例中表示。可以在圖表中繪制一個或多個數(shù)據(jù)系列。餅圖只有一個數(shù)據(jù)系列。）中各項的大小與各項總和的比例。[["小米",60.8],["三星",58.4],["聯(lián)想",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);準備數(shù)據(jù)vardataset=[["小米",60.8],["三星",58.4],["聯(lián)想",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