Explicador de Caleidoscopio
Objetivo de este acertijo:
Usar el método d3.selectAll() para definir un atributo en todas las instancias de un tipo de forma.
Tutorial de la solución:
El método d3.selectAll() selecciona todas las instancias de un tipo de forma. Por ejemplo, d3.selectAll('circle') selecciona cada círculo y d3.selectAll('rect') selecciona cada rectángulo. Una vez que se han seleccionado todas las instancias de una forma, puedes definir todos sus atributos usando un .attr() .
En el código con el que comienzas, hay una declaración de la variable squares incompleta y una animación .transition(). Debido a que la variable squares está incompleta, la .transition() no tiene nada en qué animar y no se ejecutará. En este acertijo, usarás d3.selectAll() para actualizar la variable squares, de modo que la animación se ejecute en todos los rectángulos.
Para completar el acertijo, adjunta .selectAll() al final de d3 y usa 'rect' como un argumento. Ahora, la animación funciona y cada rectángulo tendrá un color diferente.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
let squares = d3.selectAll('rect');
squares.transition().attr('fill',pickRandom(color));
Conceptos de JavaScript: variable
Conceptos de D3: atributo, .transition(), d3.selectAll()
Código adicional (código oculto que se ejecuta antes del código del acertijo):
let parts = svg.append("g");
const color = [...Array(36)].map((_, i) => `hsl(${10 * i},100%,50%)`);
let s = 20;
for (let i = 1; i < window.innerWidth; i += s) {
for (let j = 1; j < window.innerHeight; j += s) {
parts
.append("rect")
.attr("fill", `hsl(${i*j},100%,50%)`)
.attr("width", s)
.attr("height", s)
.attr("transform", `translate(${i},${j}) rotate(${Math.random() * 90}, ${s / 2}, ${s / 2})`);
}
}