Build A Snowman pt-br Explainer

Puzzle Explainer
#1

Explicador de Fazer um boneco de neve

Objetivo deste desafio: Fixar os tamanhos dos círculos do boneco de neve.

Passo a passo da solução: Há três partes principais no código: a criação das variáveis location e sizes, a função buildSnowman e a chamada .on('click',...). Sabemos que temos que mudar o tamanho de alguns círculos, por isso precisamos procurar .attr('r',...). É possível encontrá-lo dentro da definição da função buildSnowman. Atualmente, ele sempre fixa o raio de cada círculo em 30, mas precisamos mudar o tamanho. Os valores de raio que devemos usar são os da array sizes. Como estamos usando a array sizes para contar nosso laço for...of, sabemos que element está armazenando cada valor à medida que ele passa pelo laço. Isso significa que, se você atribuir element ao atributo do raio, ajustará o círculo com o tamanho correto.

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

var location = 30;
var sizes = [15, 20, 30];
function buildSnowman(){
  for (var element of sizes){
    svg.append('circle')
      .attr('r', element)
      .attr('cx', 60)
      .attr('cy', location)
      .attr('fill', 'white');
    location = location + element*2;
  }
}
button.on('click', buildSnowman);

Conceitos de JavaScript: Operadores Aritméticos (+, *), Atribuições, Expressão Binária (+, *), Bloco de Código (função, laço for)

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

Código Adicional (código oculto executado antes do código do desafio):

// Placa Traseira
svg.append('rect').attr('x',150).attr('y',50).attr('width',50).attr('height',50).attr('fill','grey').attr('stroke','darkgrey');

// Parafusos
svg.append('circle').attr('r',3).attr('cx',155).attr('cy',55).attr('fill','lightgrey').attr('stroke','silver');
svg.append('circle').attr('r',3).attr('cx',195).attr('cy',55).attr('fill','lightgrey').attr('stroke','silver');
svg.append('circle').attr('r',3).attr('cx',195).attr('cy',95).attr('fill','lightgrey').attr('stroke','silver');
svg.append('circle').attr('r',3).attr('cx',155).attr('cy',95).attr('fill','lightgrey').attr('stroke','silver');

// Profundidade de Botão
svg.append('circle').attr('r',20).attr('cx',176).attr('cy',76).attr('fill','darkred');

// Botão
var button = svg.append('circle').attr('r',20).attr('cx',174).attr('cy',73).attr('fill','red');