Bubble Up es-419 Explainer

Explicador de Burbujas arriba

Objetivo de este acertijo: Reducir la velocidad de .transition() que hace subir las bubbles.

Tutorial de la solución: El tiempo que tarda una .transition() en animar los cambios de atributos se define usando .duration(). El argumento de .duration() está en milisegundos, por lo que .duration(1000) significa que “la transición tardará 1 segundo en realizarse”. Para disminuir la velocidad de una animación, debes hacer que dure más.
Si quieres que dure 3.5 segundos, eso sería 3500 milisegundos. Puedes anexar .duration(3500) a .transition() para definir el tiempo.

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

function rise() {
  bubbles.transition().duration(3500).attr('cy',0);
}
bubbles.on('click', rise);

Conceptos de JavaScript: bloque de código (función)

Conceptos de D3: .attr('cy',), .duration(), .on('click',...), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

for (let i=0; i<50; i++) {
    svg.append('circle')
.attr('r',5 + Math.random()*35)
.attr('cx',Math.random()*window.innerWidth)
.attr('cy',20 + Math.random()*window.innerHeight)
.attr('fill',`rgb(${115+pickRandom(20)},${185+pickRandom(20)},${225+pickRandom(20)})`)
.attr('opacity',0.8);
}

let bubbles = d3.selectAll('circle');
1 Like