Black Hole pt-br Explainer

Explicação do desafio Buraco negro

Objetivo do desafio:
Este desafio usa conceitos de JavaScript previamente ensinados (variáveis e manipuladores de eventos) com conceitos de D3 previamente ensinados (método de transição, método de duração e atributos).

Especificamente, você usará um manipulador de eventos e uma variável para animar as mudanças dos atributos 'cx' e 'cy' dos círculos SVG.

Passo a passo da solução:
No código com o qual você começa, existem duas declarações de variável, x e y, uma função, collapse, um blackHole e um manipulador de eventos. As variáveis x e y são alguns números entre 0 e 200 e são usadas como valores para os atributos 'cx' e 'cy' de blackHole. A função collapse contém uma animação incompleta em stars. A animação não está completa porque falta um atributo e um valor para que stars faça a transição. Abaixo dessa função, há um manipulador de eventos que chama a função collapse quando blackHole é tocado. Como a animação está incompleta, nada acontece quando você toca em blackHole. Neste desafio, você concluirá a animação dentro da função collapse para animar stars quando você tocar em blackHole.

Para concluir o desafio, anexe .attr('cx', x) e attr('y', y) após .duration(4000) que está dentro da função collapse. Agora, quando você tocar em blackHole, todas as estrelas se moverão para o blackHole.

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

let x = pickRandom(200)
let y = pickRandom(200)

function collapse() {
    stars.transition()
            .duration(4000)
            .attr('cx', x)
            .attr('cy', y)
}

blackHole.attr('cx', x).attr('cy', y)
blackHole.on('click', collapse);

Conceitos de JavaScript: Variável, Manipulador de eventos, Função
Conceitos de D3: Atributo, .duration(), .transition()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

for (let i =0; i<155; i++){
    let white = svg.append('circle')             
                .attr('r',.5 + Math.random()*2)
                .attr('cx',Math.random()*window.innerWidth)
                .attr('cy',Math.random()*window.innerHeight)
                .attr('fill','white')
                .attr('opacity',`${0.2*pickRandom(9)}`);
}

for (let i =0; i<5; i++){
    let yellow = svg.append('circle')             
                .attr('r',.5 + Math.random()*2)
                .attr('cx',Math.random()*window.innerWidth)
                .attr('cy',Math.random()*window.innerHeight)
                .attr('fill','yellow')
                .attr('opacity',`${0.5*pickRandom(9)}`);
}

                
for (let i =0; i<155; i++){
    let grey = svg.append('circle')             
                .attr('r',.5 + Math.random()*2)
                .attr('cx',Math.random()*window.innerWidth)
                .attr('cy',Math.random()*window.innerHeight)
                .attr('fill','grey')
                .attr('opacity',`${0.2*pickRandom(9)}`);
}
                
let stars =d3.selectAll('circle')

let blackHole =  svg.append('circle')             
                .attr('r',30 + Math.random()*2)
                .attr('fill','black')

[/details]