Cutting Ties pt-br Explainer

Explicação de Cortando as cordas

Objetivo deste desafio: Remova a linha e faça a boia flutuar até a parte superior.
Passo a passo da solução: Todo o trabalho que você precisa fazer estará dentro da definição da função cutLine - o bloco de código entre as chaves {}. Essa função cutLine será executada quando você tocar no cabo (o retângulo cinza). Primeiro, é necessário que a linha desapareça e isso pode ser feito usando-se line.remove();. A outra parte do desafio é fazer a boia flutuar até a parte superior. E como é necessário que ela seja animada, isso exigirá uma transição. Você sabe iniciar o comando como: buoy.transition(). Depois disso, é necessário especificar para que a transição está passando - a superfície da água. A posição vertical entre 30 e 60 fará exatamente isso, portanto .attr('cy', 50) funcionaria. Lembre-se que o .attr() deve vir após a .transition(), mas como parte do mesmo comando. Como você faz a boia saltar na parte superior? Ao mudar sua aceleração: .ease(d3.easeElastic) fará com que a transição use um efeito elástico ao mover o círculo. Uma última etapa é desacelerar a animação alterando a duração. .duration() define o número de milissegundos para a transição completar sua animação. Para este desafio, qualquer valor acima de 500 ms funcionará, mas um número mais próximo de 4000 provavelmente será mais realista.
Solução do código de exemplo:
(Toque abaixo para revelar)

Since this is the final card of the Animations I course and it is testing your knowledge, there is no sample solution code.

Conceitos de JavaScript: Bloco de Código (função), Identificadores, Expressão de Membro, Declaração de Variável
Conceitos 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’,)