Explicação de Controle de cor
Objetivo deste desafio: Faça com que o círculo mude para uma cor aleatória cada vez que tocar nele.
Passo a passo da solução: Quando você executa seu programa, ele vê que você criou uma função chamada changeColor(). Ele não a executa imediatamente, mas espera até que outra parte de seu código a chame à ação. Portanto, a primeira coisa que é de fato executada é o circle.attr('fill', pickRandom(color)); logo no início. Isso define o circle para uma cor aleatória. Em seguida, a função é ignorada e passa para a linha circle.on('click', changeColor);. Essa parte é complicada, mas ajuda se você a ler de trás para frente: ela executará a função changeColor uma vez que você 'click' .on() círculo. Então, você clica no círculo, e ele fica preto porque você precisa olhar dentro da função em que define o atributo 'fill' e mudá-lo para pickRandom(color), assim como faz a primeira linha. Sua função deve executar o mesmo código da primeira linha, mas precisa funcionar toda vez que você tocar no círculo e é exatamente isso que faz a última linha do programa.
Solução do código de exemplo:
(Toque abaixo para revelar)
circle.attr('fill', pickRandom(color));
function changeColor() {
circle.attr('fill', pickRandom(color));
}
circle.on('click', changeColor);
Conceitos de JavaScript: Bloco de Código (função), Funções de Chamada, Aninhamento de Chamada, Identificadores
Conceitos do Grasshopper: pickRandom()
*Conceitos de D3: .attr(‘fill’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
var circle = svg.append('circle').attr('r',window.innerHeight/2-20).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2);
let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);