Great Pumpkin es-419 Explainer

Explicador de Gran calabaza

Objetivo de este acertijo: Agregar un controlador de eventos a pumpkin para que crezca cada vez que la pulsas.

Tutorial de la solución: pumpkin se crea en la parte inferior del código de inicio. Es sólo un círculo naranja. La función grow() aumenta el valor de la variable size en 5 y luego usa esa variable para actualizar el radio de pumpkin usando el atributo 'r'. Para que la función grow() se ejecute cada vez que pulsespumpkin, debes aplicar una llamada .on('click',...) a pumpkin.

Al final de tu código, agrega pumpkin.on(...). Esa es la configuración para agregar un controlador de eventos a pumpkin. El primer argumento de la llamada .on(...,...) es la acción que activará el controlador de eventos. Debe ser un 'click'. El segundo argumento es una función de devolución de llamada que se ejecutará cuando ocurra el controlador de eventos (un clic o una pulsación). La función grow debe ejecutarse con cada clic.

Para asegurarte de tener el orden correcto, puedes leer el comando al revés: grow cuando haces 'click' .on() en pumpkin.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


function grow() {

size += 5;

pumpkin.attr('r', size);

}

let size = 20;

let pumpkin = svg.append('circle')

.attr('r', size)

.attr('cx', 150)

.attr('cy', 100)

.attr('fill', 'orange');

pumpkin.on('click', grow);

Conceptos de JavaScript: operador de asignación (+=), bloque de código (función)

Conceptos de D3: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr(r,), .on('click',)

1 Like