Slow Down pt-br Explainer

Explicação de Desacelerar

Objetivo do desafio:
Usar o método .duration() para alterar a velocidade em uma animação SVG.

Passo a passo da solução:
O método .duration() define o tempo, em milissegundos, que uma .transition() leva para ser concluída. Quanto maior o número, mais lenta é a animação.

No código com o qual você começa, existe uma função move e um manipulador de eventos que chama move quando se toca em shapes. A função move faz duas coisas: ela faz a transição dos círculos de sua atual posição 'cx' para 400 ao longo de 1000 milissegundos (1 segundo) e - ao mesmo tempo - faz a transição dos quadrados de sua posição 'x' atual para -400 ao longo de 1000 milissegundos (1 segundo). Neste desafio, você desacelerará essa animação ajustando a .duration() da .transition() para um número mais alto.

Para concluir o desafio, mude o argumento de cada método .duration() para 4000 (4 segundos). Agora, quando você tocar nas formas, elas não se moverão tão rapidamente como antes.

Solução do código de exemplo:

function move() {
    circles.transition()
            .duration(4000)
            .attr('cx',400)

    squares.transition()
            .duration(4000)
            .attr('x',-400)
}

shapes.on('click', move);

Conceitos de JavaScript: Variável, Manipulador de eventos, Função
Conceitos de D3: Atributo, .duration(), .transition()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

for (let i =0; i<10; i++){
    let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
    let circle = svg.append('circle')             
                .attr('r',10 + Math.random()*25)
                .attr('cx',Math.random()*window.innerWidth)
                .attr('cy',Math.random()*window.innerHeight)
                .attr('fill',color)
                .attr('opacity',`${0.2*pickRandom(9)}`);
}

for (let i =0; i<10; i++){
    let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
    let square = svg.append('rect')             
                .attr('width',30 + Math.random()*6)
                .attr('height',30 + Math.random()*6)
                .attr('x',Math.random()*window.innerWidth)
                .attr('y',Math.random()*window.innerHeight)
                .attr('fill',color)
                .attr('opacity',`${0.5*pickRandom(9)}`);
}

            

let circles = d3.selectAll('circle')
let squares = d3.selectAll('rect')

let shapes = d3.selectAll('circle, rect')

[/details]