Cutting Ties es-419 Explainer

Explicador de Cortar los lazos

Objetivo de este acertijo: Eliminar la línea y hacer que la boya flote a la superficie.
Tutorial de la solución: Todo el trabajo que debes hacer estará dentro de la definición de la función cutLine; el bloque de código entre las llaves {}. Esta función cutLine se ejecutará una vez que pulses la cuerda (el rectángulo gris). Primero, la línea debe desaparecer. Para hacerlo, puedes usar line.remove(); La otra parte del acertijo es lograr que la boya flote a la superficie. Y debido a que quieres que sea animada, requerirá una transición. Sabes comenzar el comando como: buoy.transition() Después de eso, debes especificar a qué está pasando la transición, la superficie del agua. Una posición vertical entre 30 y 60 hará eso, así que .attr('cy', 50) funcionaría. Recuerda que .attr() debe ir después de .transition(), pero como parte del mismo comando. ¿Cómo haces que la boya rebote a la superficie? Al cambiar su aceleración: .ease(d3.easeElastic) hará que la transición use un efecto elástico al mover el círculo. Un último paso es reducir la velocidad de la animación cambiando la duración. .duration() define el número de milisegundos para que la transición complete su animación. Para este acertijo, cualquier número sobre 500ms funcionará, pero un número más cercano a 4000 probablemente se vea más realista.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

Dado que esta es la tarjeta final del curso Animaciones I y evalúa tus conocimientos, no hay solución del código de ejemplo.

Conceptos de JavaScript: bloque de código (función), identificadores, expresión de miembro, declaración de variable
Conceptos de D3: .append(), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,), .attr(‘fill’,), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .remove(), .transition(), .duration(), .ease(), .on(‘click’,)