d3 圆环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <div class="chart">
       <svg width="500" height="400"></svg>
   </div>
   
   
    <script src="d3.js"></script>

    <script>
        var svg = d3.select('svg');

        var dataset = {startAngle:0,endAngle:Math.PI * 2};

       var arcPath = d3.arc()
       .innerRadius(50)
       .outerRadius(100)
       .startAngle(0)
       .endAngle(Math.PI * 2);

       svg.append('path')
       .attr('d',arcPath())
       //.attr('d',arcPath(dataset)) 和上面相同效果，
       .attr('transform','translate(200,200)')
       .attr('stroke','#000')
       .attr('stroke-width',3)
       .attr('fill','yellow')
        
    </script>
</body>
</html>

加工一下变成好几种色的圆环

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];
})

在上面的基础上添加文本

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 + '度'
        })

好了，效果如下

d3 圆环

相关推荐