To Get To The Other Side es-419 Explainer

Explicador de Para llegar al otro lado

Objetivo de este acertijo: Que el pollo circular cruce el camino de manera segura.
Tutorial de la solución: Este acertijo se trata de la propiedad duration(). Se usa después de una transition() para definir el tiempo que tarda en completarse la transición. El número que pones en el paréntesis de duration(), llamado argumento, es la cantidad de milisegundos (ms) que debe durar la transición. Cada segundo es igual a 1000ms, así que si quieres que la transición dure 2 segundos, tendrías que usar .duration(2000). Mientras mayor sea el número, más lenta será la transición, porque tiene que propagarse la misma cantidad de animación en un tiempo más prolongado. Solo tienes que jugar con el valor de duración para que el pollo esquive todo el tráfico. Si es demasiado lento (más de 4100ms), lo atropellará el camión. Si es demasiado rápido, chocará con la bicicleta azul (menos de 1400ms) y tal vez el auto rojo (1400ms-2500ms). Eso significa que hay un punto justo entre 2500ms y 4100ms. La definición de la función startTraffic() está oculta, pero lo que hace es definir las transiciones para todos los vehículos. Entonces, cuando haces clic en el pollo, .on('click',...) ejecuta la función cross. Luego, la función cross ejecuta la función startTrafficy, por último, pasa a la transición del pollo.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

function cross() {
  startTraffic();
  chicken.transition()
    .duration(3000)
    .attr('cy', 10);
}
chicken.on('click', cross);

Conceptos de JavaScript: bloque de código (función), expresión de miembro, identificadores
Conceptos de D3: .transition(), .duration(), .attr(‘cy’,), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var greenerGrass = svg.append('rect').attr('width',500).attr('height',30).attr('fill','green');
var grass = svg.append('rect').attr('width',500).attr('height',100).attr('y',180).attr('fill','darkgreen');
var chicken = svg.append('circle').attr('r',15).attr('cx',150).attr('cy',165).attr('fill','lightyellow');
var bike = svg.append('rect').attr('width',75).attr('height',20).attr('fill','blue').attr('x',150).attr('y',30);
var car = svg.append('rect').attr('width',100).attr('height',50).attr('fill','red').attr('x',-100).attr('y',55);
var truck = svg.append('rect').attr('width',150).attr('height',65).attr('fill','white').attr('x',355).attr('y',110);

function startTraffic(){
    bike.transition().duration(3000).attr('x',-100);
    car.transition().duration(2000).attr('x',400);
    truck.transition().duration(4000).attr('x',-200);
}