Explicação do desafio Pare a confusão
Objetivo do desafio:
Usar o método .interrupt() para parar uma animação que está em andamento.
Passo a passo da solução:
O método .interrupt() para uma animação que está em andamento. Para usá-lo, adicione .interrupt() ao final da animação que você deseja parar.
No código com o qual você começa, existe uma declaração de variável, dots, uma função, stopDots, e um manipulador de eventos. dots seleciona todos os círculos e os armazena em uma variável. A função stopDots está incompleta e, abaixo disso, é chamada por um manipulador de eventos quando se toca em square. Neste desafio, você completará a função stopDots para que quando tocar em square, dots pare de se mover.
Para concluir o desafio, adicione dots.interrupt() dentro da função stopDots. Agora, quando você tocar em square a animação parará.
Solução do código de exemplo:
(Toque abaixo para revelar)
let dots = d3.selectAll('circle');
function stopDots() {
dots.interrupt();
}
square.on('click', stopDots);
Conceitos de JavaScript: Variável, Função, Manipulador de Eventos
Conceitos de D3: d3.selectAll(), .interrupt()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]
let svg = setupD3();
let XX = window.innerWidth / 2;
let YY = window.innerHeight / 2;
let phase = Math.PI * 4 / 5;
let square = svg.append('rect')
.attr('width', 100)
.attr('height', 100)
.attr('x', XX - 50)
.attr('y', YY - 50)
.attr('fill', 'red');
for (let i = 0.25; i < 5; i++) {
let dot = svg
.append('circle')
.attr('r', 25)
.attr('cx', XX)
.attr('cy', YY)
.attr('fill','red');
for (let j = 0; j < 80; j++) {
let x = YY * (Math.sin((i + j) * phase));
let y = YY * (Math.cos((i + j) * phase));
dot
.transition()
.delay(3000 * (j+i/5))
.duration(3000)
.attr('fill', `hsl(${(i+j) * 360 / 5},100%,50%)`)
.attr('transform', `translate(${x},${y})`);
}
dot.transition().delay(3000 * 80).attr('cx', 1000).attr('cy', 1000);
}
[/details]