Explicador de Mandala
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 dots incompleta y una animación .transition(). Debido a que la variable dots 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 dots, de modo que la animación se ejecute en todos los círculos.
Para completar el acertijo, adjunta .selectAll() al final de d3 y usa 'circle' como un argumento. Ahora, la animación funciona y todos los círculos se agrandan.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
let dots = d3.selectAll('circle');
dots.transition().attr('r',20);
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%)`);
const n = 230;
for (var i = 3; i < n; i++) {
parts
.append('circle')
.attr('fill', `hsl(${3 * i},100%,50%)`)
.attr('r', 2)
.attr('cx', window.innerWidth / 2 + i * Math.sin(i))
.attr('cy', window.innerHeight / 2 + i * Math.cos(i));
}