Stop the Scramble pt-br Explainer

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]