今天，抽出时间来了，那就跟大家分享一波绘制环图的方法。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3绘制饼图</title>
</head>
<body>
<script src="./d3.v3.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.96;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var dataset = [
{
startAngle:0,endAngle:Math.PI * 0.3},
{
startAngle:Math.PI * 0.3,endAngle:Math.PI},
{
startAngle:Math.PI,endAngle:Math.PI * 1.5},
{
startAngle:Math.PI * 1.5,endAngle:Math.PI * 2}
];
//创建一个弧生成器
var arcPath = d3.svg.arc()
.innerRadius(40)
.outerRadius(100);
var color = d3.scale.category20();
//添加路径
svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("d",function(d){
return arcPath(d);})
.attr("transform","translate("+width/2+","+height/2+")")
.attr("stroke","black")
.attr("stroke-width","2px")
.attr("fill",function(d,i){
return color(i);});
//添加文字
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("transform",function(d){
return "translate("+width/2+","+height/2+")"+"translate("+arcPath.centroid(d)+")";
})
.attr("text-anchor","middle")
.attr("fill","white")
.attr("font-size","18px")
.text(function(d){
return Math.floor((d.endAngle - d.startAngle)*180/Math.PI)+"°";});
</script>
</body>
</html>
运行结果，如下：
最后，感谢大家前来观看鄙人的文章，文中或有诸多不妥之处，还望指出和海涵。