Falling Down pt-br Explainer

Explicação de Caindo

Objetivo do desafio: Use .transition() para animar uma forma SVG.
Passo a passo da solução: O método .transition() anima as mudanças feitas a uma forma SVG, aplicando qualquer novo atributo ao longo do tempo.

Sem .transition(), qualquer alteração feita em uma forma SVG seria aplicada imediatamente.

Para concluir o desafio, adicione .transition() ao final de circle dentro da declaração de função fall(), depois use .attr() para definir os atributos para os quais circle fará a transição.

Ao usar .transition(), qualquer novo atributo deve estar na mesma linha que a .transition() para que a animação funcione corretamente.

Solução do código de exemplo:

let circle = svg.append('circle').attr('fill', 'red').attr('r', 15).attr('cx', 150).attr('cy', 15);

function fall() {
    circle.transition().attr('cy', 200).attr('r', 30);
}

circle.on('click', fall);

Conceitos de JavaScript: Funções, variáveis, propriedades, manipuladores de eventos, funções retorno de chamada
Conceitos de D3: .attr(), .transition(), .append()