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]