Today, I will complete the posting task, this time drawing a pie chart of percentage data.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3绘图</title>
</head>
<body>
<script src="./d3.v4.min.js" charset="UTF-8"></script>
<script>
var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;//获取屏幕的宽度
var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;//获取屏幕的高度
var width = w*0.98;
var height = h*0.9;
//定义数据集
var dataset = [["chrome",37.58],["Edge",27.41],["Firefox",31.56],["360",12.72],["QQ",13.58],["IE",21.49],["其他",17.34]]
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height)
var pie = d3.pie()//实例化d3的饼图对象
.value(function(d){
return d[1];});
var piedata = pie(dataset);
var innerRadius = 0;//设置内半径
var outerRadius = 150;//设置外半径
var arc = d3.arc()//创建弧生成器对象
.innerRadius(innerRadius)//设置内半径
.outerRadius(outerRadius);//设置外半径
var color = d3.scaleOrdinal(d3.schemeCategory10);
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);//将角度转换为弧度(d3使用弧度绘制)
});
arcs.append("text")
.attr("transform",function(d){
var x = arc.centroid(d)[0] * 1.1;
var y = arc.centroid(d)[1] * 1.1;
return "translate(" + x + "," + y + ")";
})
.attr("text-anchor","middle")//文本内容居中
.attr("font-size",function(d){
return d.data[1] + "px";
})
.text(function(d){
return d.value + "%";
})
//鼠标操作
.on("mouseover",function(d,i){
if(d.data[1]<10){
d3.select(this)
.attr("font-size",24);
}
})
//鼠标操作
.on("mouseout",function(d,i){
if(d.data[1]<10){
d3.select(this)
.attr("font-size",function(d){
return d.value + "px";
});
}
});
arcs.append("line")//添加标签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")
.attr("fonr-size",12)
.text(function(d){
return d.data[0];
});
</script>
</body>
</html>
The results of the operation are as follows:
Finally, thank you all for coming to watch my article, there may be many improprieties in the article, and I hope to point out He Haihan.