Explicador de Círculos anidados
Objetivo de este acertijo: Usar un for loop para crear muchos círculos diferentes al mismo tiempo.
Tutorial de la solución: En este acertijo, un classic for loop declara la variable size y define su valor en 300. Después de cada ciclo, size se reducirá en by 10, y el for loop dejará de ejecutarse cuando size ya no sea mayor que 0.
Dentro del bloque de código del classic for loop, svg.append('circle') crea un nuevo círculo. Cada vez que el for loop itera, se crea un nuevo círculo.
Para completar el acertijo, configura el atributo de radio del círculo para que use el valor de la variable size.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
for (let size = 300; size > 0; size -= 10) {
svg.append('circle').attr('fill', pickRandom(color)).attr('r', size);
}
Conceptos de JavaScript: classic forlLoops, operador de asignación de suma
Conceptos de D3: SVG, .attr()
Código adicional (código oculto que se ejecuta antes del código del acertijo):
let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);