Today, I took the time to post, and try to fill up the previous posting tasks.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图</title>
</head>
<body>
<script src="./d3.v4.min.js" charset="UTF-8"></script><!--D3文件-->
<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.96;
//数据集
var dataset = [
["Chrome",38.50],
["Firefox",53.39],
["Edge",21.74],
["360",5.72],
["QQ",17.58],
["IE",7.64],
["其他",15.91]
];
var svg = d3.select("body")
.append("svg")//添加svg标签
.attr("width",width)//添加width属性
.attr("height",height);//添加height属性
var pie = d3.pie()//调用d3的饼图对象
.value(function(d){
return d[1];});
var piedata = pie(dataset);//传递数据集
var outerRadius = 150;//外半径
var innerRadius = 0; //内半径
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") //每个g元素添加path元素，用g的数据d生成路径
.attr("fill",function(d,i){
return color(i);//填充色
})
.attr("d",function(d){
return arc(d);//将角度转为弧度
});
</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.