Kaleidoscope es-419 Explainer

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