Stop Short pt-br Explainer

Explicação de Parada curta

Objetivo deste desafio: Fazer com que a caixa pare de se mover quando você toca no botão vermelho.

Passo a passo da solução: Quando o código começa a ser executado, a box.transition()... começa a animar a box. A box continuará em movimento até que outra .transition() seja aplicada à box ou que a transição original termine ou seja interrompida com box.interrupt().

Dentro da definição da função stopBox(), adicione box.interrupt(). Quando esse comando executar qualquer transição as animações na box serão canceladas. A última linha de código já conecta a função stopBox ao botão usando button.on('click',stopBox)

Solução do código de exemplo:
(Toque abaixo para revelar)

function stopBox() {
  box.interrupt();
}
box.transition().ease(d3.easeLinear).duration(10000).attr('x', 0);
button.on('click', stopBox);

Conceitos de JavaScript: Bloco de código (função)

Conceitos de D3: .attr('x',), .duration(), .ease(), .interrupt(), .on('click',...), .transition()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

let box = svg.append('rect')
                .attr('width',100)
                .attr('height',100)
                .attr('x',window.innerWidth-100)
                .attr('y',60)
                .attr('fill',`hsl(${50+Math.random()*250},100%,50%)`);
                
let button = svg.append('circle')
                .attr('r',30)
                .attr('cx',30)
                .attr('cy',30)
                .attr('fill','red');
           

[/details]