Follow The Leader pt-br Explainer

Explicação de Siga o mestre

Objetivo do desafio: Este desafio combina o uso de conceitos de JavaScript (manipuladores de eventos e funções de seta) e conceitos de D3 (atributo .selectAll() e 'fill') para modificar formas.

Especificamente, você usará um manipulador de eventos com uma função de seta para mudar a cor de múltiplas formas ao mesmo tempo.

Passo a passo da solução: No código com o qual você começa, há um manipulador de eventos anexado a circleButton. Quando você toca em circleButton, uma função de seta é executada e cada 'circle' muda de cor. Neste desafio, você adicionará outro manipulador de eventos que faz a mesma coisa, mas com todos os retângulos, 'rect', e em squareButton.

Para concluir o desafio, adicione sqaureButton.on('click', ___) abaixo do manipulador de eventos circleButton. Adicione uma função de seta como 2º argumento da chamada .on(___, ___). Dentro da função de seta, selecione cada quadrado usando d3.selectAll('rect') e defina seu 'fill' como pickRandom(color). Quando você tocar em squareButton, todos os quadrados mudarão de cor.

Solução do código de exemplo:


circleButton.on('click',()=>{

d3.selectAll('circle').attr('fill',pickRandom(color));

});

squareButton.on('click',()=>{

d3.selectAll('rect').attr('fill', pickRandom(color))

});

Conceitos de JavaScript: Variável, Manipulador de Eventos, Função de Seta

Conceitos de D3: Atributo, d3.selectAll()

Conceitos do Grasshopper: pickRandom()

Código Adicional (código oculto executado antes do código do desafio):


let WIW = window.innerWidth;

let WIH = window.innerHeight;

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

let svg = setupD3();

for (let i = 0; i < 100; i++) {

svg.append('circle').attr('r',10).attr('cx',20*pickRandom(WIW/20)).attr('cy',20*pickRandom(WIH/20)).attr('fill','blue');

svg.append('rect').attr('width',20).attr('height',20).attr('x',20*pickRandom(WIW/20)).attr('y',20*pickRandom(WIH/20)).attr('fill','red');

}

let circleButton = svg.append('circle').attr('r',30).attr('cx',35).attr('cy',35).attr('fill','blue').attr('stroke','white').attr('stroke-width',3);

let squareButton = svg.append('rect').attr('width',60).attr('height',60).attr('x',70).attr('y',5).attr('fill','red').attr('stroke','white').attr('stroke-width',3);