To Get to the Other Side pt-br Explainer

Explicação de Para chegar ao outro lado

Objetivo deste desafio: Fazer a galinha circular atravessar a estrada com segurança.
Passo a passo da solução: Este desafio é todo sobre a propriedade duration(). É usado após uma transition() para definir o tempo necessário para que a transição seja concluída. O número que você coloca entre parênteses de duration(), chamado de argumento, é a quantidade de milissegundos (ms) que a transição deve durar. Cada segundo é igual a 1000 ms, portanto, se quiser que a transição dure 2 segundos, você usaria .duration(2000). Quanto maior o número, mais lenta será a transição, pois ela tem que espalhar a mesma quantidade de animação por um tempo maior. Basta brincar com o valor de duração da galinha para que ela se desvie de todo o tráfego. Se for muito lenta (mais de 4100 ms), será atingida pelo caminhão. Se for muito rápida, atingirá a moto azul (menos de 1400 ms) e talvez a vermelha (1400 ms-2500 ms). Isso significa que há um ponto ideal entre 2500 ms e 4100 ms. A definição da função startTraffic() está oculta, mas o que ela faz é definir as transições para todos os veículos. Assim, quando você clica na galinha, o .on('click',...) executa a função cross. Em seguida, a função cross executa a função startTraffic e finalmente passa para a transição da galinha.
Solução do código de exemplo:
(Toque abaixo para revelar)

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

Conceitos de JavaScript: Bloco de Código (função), Expressão de Membro, Identificadores
Conceitos de D3: .transition(), .duration(), .attr(‘cy’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

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);
}

[/details]