Build A Snowman es-419 Explainer

Puzzle Explainer
#1

Explicador de Haz un muñeco de nieve

Objetivo de este acertijo: Corregir los tamaños de los círculos del muñeco de nieve.
Tutorial de la solución: El código tiene tres partes principales: creación de las variables location y sizes, la función buildSnowman y la llamada .on('click',...). Sabemos que debemos cambiar los tamaños de algunos círculos, por lo que debemos buscar .attr('r',...). Puedes encontrarlo dentro de la definición de la función buildSnowman. Actualmente, siempre define el radio de cada círculo en 30, pero debemos cambiar el tamaño. Los valores del radio que debemos usar son los del arreglo sizes. Dado que estamos usando el arreglo sizes para contar en nuestro ciclo for...of, sabemos que element almacena cada valor a medida que pasa por el ciclo. Eso significa que si asignas element al atributo de radio, definirás el círculo en el tamaño correcto.
Solución del código de ejemplo:
(Pulsa a continuación 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);

Conceptos de JavaScript: operadores aritméticos (+, *), asignaciones, expresión binaria (+, *), bloque de código (función, for loop)
Conceptos de D3: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

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

// Bolts
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');

// Button depth
svg.append('circle').attr('r',20).attr('cx',176).attr('cy',76).attr('fill','darkred');

// Button
var button = svg.append('circle').attr('r',20).attr('cx',174).attr('cy',73).attr('fill','red');
1 Like
#2
#3