Burst Your Bubble pt-br Explainer

Explicação de Estourar a bola

Objetivo deste desafio: Permitir que a função de explosão estoure a bola.
Passo a passo da solução: A razão pela qual o código inicial não deixa você estourar a bola enquanto ela está sendo soprada é porque está esperando que a transição do sopro termine primeiro. Essa transição tem uma duração de 10 segundos (10.000 ms), mas queremos conseguir estourar a bola a qualquer momento. Para isso, é preciso usar .interrupt(). Quando você usa o comando: bubble.interrupt(), ele para qualquer transição que esteja sendo executada no objeto bubble. Se você tentar definir atributos enquanto outra transição estiver sendo executada, eles serão ignorados, portanto, não deixe de incluir a interrupção antes de definir atributos. Uma observação extra: se você quiser iniciar uma nova transição enquanto outra já estiver sendo executada, existe um .interrupt() já incorporado em .transition(), então uma nova transição interromperá automaticamente uma antiga, mas o .attr() sozinho não o fará.
Solução do código de exemplo:
(Toque abaixo para revelar)

function blow() {
  bubble.interrupt();
  bubble.transition()
    .attr('r', 500)
    .attr('cx', 585)
    .duration(10000)
    .ease(d3.easeSinOut);
}
function burst() {
  bubble.interrupt();
  bubble.attr('r', 15)
    .attr('cx', 100);
}
bubble.transition()
  .attr('r', 15)
  .duration(10000)
  .attr('cx', 100)
  .ease(d3.easeSinOut);
face.on('click', blow);
bubble.on('click', burst);

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

var bubble = svg.append('circle').attr('r',30).attr('cx',115).attr('cy',140).attr('fill','pink');
var face = svg.append('path').attr('d','M0 258.39C40.79 190.51 73.36 239.28 83.23 209.29C76.1 189.5 75.03 187.48 87.11 183.25C90.98 178.73 88.07 176.13 84.52 170.3C85.78 165.89 88.17 164.27 84.52 159.95C75.48 159.3 74.35 160.48 72.9 155.81C71.17 146.88 79.52 147.79 83.23 133.87C68.87 127.69 56.45 120.93 52.26 109.8C73.59 77.64 46.23 120.44 47.74 97.1C49.27 83.82 47.67 68.23 42.96 50.33C36.01 35.95 22.34 22.5 1.94 10');

face.attr('transform','translate(0 -30)').attr('stroke','plum');

[/details]