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%)`);