1. 圆环主要用到就是 d3.arc() 这个方法
最简单的圆环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="d3.js"></script>
</head>
<body>
<svg width="500" height="400"></svg>
<script>
let sector = d3.arc()
.innerRadius(50)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI * 1.5);
d3.select('svg').append('path')
.attr('d',sector())
.attr('fill','red')
.attr('transform','translate(100,100)')
</script>
</body>
</html>
上面的代码很简单,innerRadius内半径、outerRadius外半径、startAngle起始角度、endAngle结束角度(参数Math.PI角度值);d3.arc()()返回的就是 path 标签 d 属性的值;
2. 下面加工一下变成好几种色的圆环
var svg = d3.select('svg');
var dataset = [
{startAngle:0,endAngle:Math.PI * 0.75},
{startAngle:Math.PI * 0.75,endAngle:Math.PI * 1.25},
{startAngle:Math.PI * 1.25,endAngle:Math.PI * 2}
];
var color = ['red','green','blue'];
var arcPath = d3.arc()
.innerRadius(50)
.outerRadius(100);
svg.selectAll('path')
.data(dataset)
.enter()
.append('path')
.attr('d',function(value){
return arcPath(value)
})
.attr('transform','translate(200,200)')
.attr('fill',function(value,index){
return color[index];
})
3. 在上面的基础上添加文本
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('transform',function(value){
return "translate(200,200)"+
"translate("+arcPath.centroid(value)+")";
})
.attr('text-anchor','middle')
.attr('fill','#000')
.text(function(value){
return (value.endAngle-value.startAngle)*180/Math.PI + '度'
})
好了,效果如下
4. 饼图
从上面很容易看出,饼图就是弧形内半径为0;这里就是这个dataset 不好处理;d3.pie()这个函数就很容易的结局了这个问题;
let data = [11,22,33,44,55];
let dataset = d3.pie()(data);
console.log(dataset)
得到的dataset如下
还有更多好方法还在学习