d3.js to realize slow motion animation

Recently learning d3.js , when looking at the latest version of d3.js (v5), we found that there is a function library to achieve the effect of slow motion animation, smooth animation. It immediately reminds me of what Mr. Zhang wrote on github tween.js , it's really very similar to the impulse of drawing a series of small balls with d3.js to see the movement effect of each small ball.

1.js code

Introduce the latest JS file of d3.js-v5.

<script>
        var height = 3400
        var width = '100%'
        // Page visible area width
        var bodyW = document.documentElement.clientWidth
        // Ball movement time (MS)
        var duration = 2000
        // Slow motion animation mode
        var animations = ['easeLinear', 'easePolyIn', 'easePolyOut', 'easePolyInOut', 'easeQuad', 'easeQuadIn', 'easeQuadOut',
        'easeQuadInOut', 'easeCubic', 'easeCubicIn', 'easeCubicOut', 'easeCubicInOut', 'easeSin', 'easeSinIn', 'easeSinOut', 'easeSinInOut',
        'easeExp', 'easeExpIn', 'easeExpOut', 'easeExpInOut', 'easeCircle', 'easeCircleIn', 'easeCircleOut', 'easeCircleInOut', 'easeElastic',
        'easeElasticIn', 'easeElasticOut', 'easeElasticInOut', 'easeBack', 'easeBackIn', 'easeBackOut', 'easeBackInOut',
        'easeBounce', 'easeBounceIn', 'easeBounceOut', 'easeBounceInOut']
        var svg = d3.select('body').append('svg').attr('height', height)
            .attr('width', width)
        var g = svg.append('g')
        // Caption text
        var title = g.append('text')
        title.text('d3.js To achieve slow motion animation').attr('fill', 'black')
            .attr('x', bodyW / 2)
            .attr('y', 20)
            .attr('text-anchor', 'middle')
            .style('font-size', '20px')
            .style('font-weight', 'bold')
            .attr('dy', 8)
        // Small balls of various sports animation
        animations.forEach((v, i) => {
            var g = svg.append('g')
            g.append('text').text((i + 1) + '.' + v).attr('fill', 'black')
            .attr('x', 100)
            .attr('y', 90 * (i + 1))
            .attr('text-anchor', 'middle')
            .style('font-size', '14px')
            .style('font-weight', 'bold')
            var circle = svg.append('circle').attr('cx', 100)
            .attr('cy', 90 * (i + 1) + 40).attr('r', 25).style('fill', 'steelblue')
            .style('cursor', 'pointer')
            .on('click', function () {
                circle.transition() // Start transition effect
                    .duration(duration)
                    .attr('cx', 800)
                    .ease(d3[v])
            })
        })
    </script>

2. The animation effect is as follows: