Explicação de Pular por aí
Objetivo deste desafio: Fazer com que a ball se mova para um lugar aleatório na tela sempre que for tocada.
Passo a passo da solução: O código começa quase pronto. Quando você toca na bola, ela se move para um lugar aleatório na parte superior da tela. Isto porque o 'cx' está configurado para pickRandom(200) sempre que você 'click' .on() (clicar em) ball.
Quando ball passar para um 'cx' aleatório, ela também deve passar para um 'cy' aleatório. Anexe .attr('cy', pickRandom(200)) ao .attr('cx',...). Não é necessário adicionar outra .transition() porque as duas mudanças de .attr() devem acontecer ao mesmo tempo.
Solução do código de exemplo:
(Toque abaixo para revelar)
let ball = svg.append('circle')
.attr('r', 50)
.attr('fill', pickRandom(color))
.attr('cx', 50)
.attr('cy', 50);
ball.on('click', ()=>{
ball.transition()
.attr('cx', pickRandom(200))
.attr('cy', pickRandom(200));
});
Conceitos de JavaScript: Bloco de Código (função de seta), Expressão de Membro, Identificadores
Conceitos do Grasshopper: pickRandom()
Conceitos de D3: .attr('cx',), .attr('cy',), .attr('fill',), .attr('r',), .on('click',), .transition()
Código Adicional (código oculto executado antes do código do desafio):
let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);
