Great Pumpkin pt-br Explainer

Explicação de Grande abóbora

Objetivo deste desafio: Adicione um manipulador de eventos a pumpkin para fazê-la crescer a cada vez que você tocar nela

Passo a passo da solução: A pumpkin é criada no final do código inicial. É apenas um círculo laranja. A função grow() aumenta o valor da variável size em 5 e depois usa essa variável para atualizar o raio da pumpkinusando o atributo 'r'. Para que a função grow() seja executada cada vez que você tocar em pumpkin, é necessário aplicar uma chamada .on('click',...) para pumpkin.

No final do seu código, adicione pumpkin.on(...). Essa é a configuração para adicionar um manipulador de eventos a pumpkin. O 1º argumento da chamada .on(...,...) é a ação que desencadeará o manipulador de eventos. É necessário que isso seja um 'click'. O 2º argumento é uma função retorno de chamada que será executada quando o evento disparador (um clique ou toque) ocorrer. É necessário que a função grow seja executada a cada clique.

Para ter certeza que a ordem está correta, você pode ler o comando de trás para frente: grow quando você 'click' .on() pumpkin.

Solução do código de exemplo:
(Toque abaixo para revelar)

function grow() {
  size += 5;
  pumpkin.attr('r', size);
}
let size = 20;
let pumpkin = svg.append('circle')
                   .attr('r', size)
                   .attr('cx', 150)
                   .attr('cy', 100)
                   .attr('fill', 'orange');
pumpkin.on('click', grow);

Conceitos de JavaScript: Operador de Atribuição (+=), Bloco de Código (função)

Conceitos de D3: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr(r,), .on('click',)