今天，接着补齐发文任务。这次是绘制一个弧形和数据饼图。
弧形生成器，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3弧线生成器</title>
</head>
<body>
<script src="./d3.v3.min.js" charset="UTF-8"></script><!--调用D3文件-->
<script>
var width = 500; //svg绘制区域的宽度
var height = 500; //svg绘制区域的高度
var svg = d3.select("body") //选择<body>
.append("svg") //在<body>中添加<svg>标签
.attr("width",width) //设定<svg>的宽度属性
.attr("height",height) //设定<svg>的高度属性
var dataset = {
startAngle:0,endAngle:Math.PI * 1.25};//数据集
//创建一个弧生成器
var arcPath = d3.svg.arc()
.innerRadius(50)//内半径
.outerRadius(100);//外半径
svg.append("path")
.attr("d",arcPath(dataset))
.attr("transform","translate(250,250)")
.attr("stroke","black")//弧线填充色为黑色
.attr("stroke-width","3px")//填充宽度为3px
.attr("fill","green");//填充色为绿色
</script>
</body>
</html>
运行结果，如下：
绘制数据饼图，代码如下：
<!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)//设置属性width
.attr("height",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(0)//内半径为0，是饼图，否则是环图
.outerRadius(100);//外半径为100
var color = d3.scale.category20();//D3的颜色
//添加路径
svg.selectAll("path")//选择标签path
.data(dataset)
.enter()
.append("path")
.attr("d",function(d){
return arcPath(d);})
.attr("transform","translate("+width/2+","+height/2+")")
.attr("stroke","black")//填充色black
.attr("stroke-width","2px")//填充宽度2px
.attr("fill",function(d,i){
return color(i);});
//添加文字
svg.selectAll("text")//选择标签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>
运行结果，如下：
最后，感谢大家前来观看鄙人的文章，文中或有诸多不妥之处，还望指出和海涵。