D3.js V5缓动函数

最新推荐文章于 2021-08-12 15:32:03 发布

X01动力装甲

最新推荐文章于 2021-08-12 15:32:03 发布

阅读量337

点赞数

分类专栏： D3.js 文章标签： d3.js

本文为博主原创文章，未经作者允许禁止任何形式的转载。

本文链接：https://blog.csdn.net/lin5165352/article/details/100987332

版权

D3.js 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

D3.js V5缓动函数

在这里插入图片描述
参考地址：https://github.com/d3/d3-ease/blob/v1.0.5/README.md#_ease
代码:

<!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>使用缓动函数</title>
    <script src="./d3.js"></script>
</head>
<body style="background-color: rgb(0, 0, 0)">
    <script>
        var data = [
            {name:'Linear',fn:d3.easeLinear},
            {name:'Cubic',fn:d3.easeCubic},
            {name:'CubicIn',fn:d3.easeCubicIn},
            {name:'Sin',fn:d3.easeSin},
            {name:'SinIn',fn:d3.easeSinIn},
            {name:'Exp',fn:d3.easeExp},
            {name:'Circle',fn:d3.easeCircle},
            {name:'Back',fn:d3.easeBack},
            {name:'Bounce',fn:d3.easeBounce},
            {name:'Elastic',fn:d3.easeElastic},
            {name:'PolyIn',fn:d3.easePoly.exponent(4)},
            {name:'Custom',fn:function(t){return t*t}},
        ]  
        /* 创建一个序数比例尺  创建10个颜色的数组 */
        var colors = d3.scaleOrdinal(d3.schemeCategory10)
        d3.select('body').selectAll('div')
            .data(data)
            .enter()
            .append('div')
            .style('top',(d,i)=>{
                return (i*30+30) + 'px'
            }) 
            .style('left','30px')
            .style('position','absolute') 
            .style('width','70px')
            .style('background-color',(d,i)=>{
                return colors(i)
            })
            .style('color','white')
            .text((d)=>{
                return d.name
            })
        /* 因为this的指向  这里不要用箭头函数了 */    
        d3.selectAll('div').each(function(d){
            d3.select(this)
                .transition()
                .delay(500)
                .ease(d.fn)
                .duration(3000)
                .style('left','330px')
        })    
    </script>
</body>
</html>