七、圆弧和饼图

最新推荐文章于 2023-07-28 20:55:00 发布

一叶知秋9307

最新推荐文章于 2023-07-28 20:55:00 发布

阅读量406

点赞数

分类专栏： d3 D3入门文章标签： d3

本文链接：https://blog.csdn.net/qq_40285497/article/details/84899975

版权

d3 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

D3入门

4 篇文章 0 订阅

订阅专栏

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如下

还有更多好方法还在学习

一叶知秋9307

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
七、圆弧和饼图

1. 圆环主要用到就是 d3.arc() 这个方法最简单的圆环<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scal...
复制链接

扫一扫