Follow The Leader es-419 Explainer

Explicador de Sigue al líder

Objetivo de este acertijo:
Este acertijo combina el uso de conceptos de JavaScript (controladores de eventos y funciones de flecha) y conceptos de D3 (atributos .selectAll() y 'fill') para modificar formas.

Específicamente, usarás un controlador de eventos con una función de flecha para cambiar el color de varias formas a la vez.

Tutorial de la solución:
En el código con el que comienzas, hay un controlador de eventos adjunto a circleButton. Cuando pulsas circleButton, se ejecuta una función de flecha y cada 'circle' cambia de color. En este acertijo, agregarás otro controlador de eventos que haga lo mismo, pero con cada rectángulo 'rect', y en squareButton.

Para completar el acertijo, agrega sqaureButton.on('click', ___) debajo del controlador de eventos circleButton. Agrega una función de flecha como el segundo argumento de la llamada .on(___, ___). Dentro de la función de flecha, selecciona cada cuadrado usando d3.selectAll('rect') y define su 'fill' en pickRandom(color). Ahora, cuando pulses squareButton, todos los cuadrados cambiarán de color.

Solución del código de ejemplo:

circleButton.on('click',()=>{
    d3.selectAll('circle').attr('fill',pickRandom(color));
});

squareButton.on('click',()=>{
    d3.selectAll('rect').attr('fill', pickRandom(color))
});

Conceptos de JavaScript: variable, controlador de eventos, función de flecha
Conceptos de D3: atributo, d3.selectAll()
Conceptos de Grasshopper: pickRandom()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

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);
1 Like