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()