Jump Around es-419 Explainer

Explicador de Salta

Objetivo de este acertijo: Hacer que ball se mueva a un punto aleatorio en la pantalla cada vez que se pulse.

Tutorial de la solución: El código comienza casi hecho. Cuando pulses la pelota, se mueve a un lugar aleatorio en la parte superior de la pantalla. Esto se debe a que 'cx' se define en pickRandom(200) cada vez que 'click' .on() (haces clic en) ball.

Cuando ball se mueve a un 'cx' aleatorio, también se debe mover a un 'cy' aleatorio. Adjunta .attr('cy', pickRandom(200)) a .attr('cx',...). No necesitas agregar otra .transition() porque ambos cambios de .attr() se deben producir al mismo tiempo.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

let ball = svg.append('circle')
.attr('r', 50)
.attr('fill', pickRandom(color))
.attr('cx', 50)
.attr('cy', 50);

ball.on('click', ()=>{
    ball.transition()
          .attr('cx', pickRandom(200))
          .attr('cy', pickRandom(200));
});

Conceptos de JavaScript: bloque de código (función de flecha), expresión de miembro, identificadores

Conceptos de Grasshopper: pickRandom()

Conceptos de D3: .attr('cx',), .attr('cy',), .attr('fill',), .attr('r',), .on('click',), .transition()
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%)`);