Drawsquare es-419 Explainer

Explicador de drawSquare

Objetivo de este acertijo: Lograr que la función drawSquare coloree el cuadro.

Tutorial de la solución: La función drawCircle funciona de la misma forma en que debe funcionar la función drawSquare, excepto que dibuja un círculo en vez de un rectángulo. Si agregas una línea para ejecutar la función drawSquare, por ejemplo, drawSquare('red'); verás un cuadro negro. Veamos la definición de la función drawSquare, el código dentro de las llaves. Observa que el rectángulo tiene todos los atributos que necesita, excepto 'fill'. Eso significa que usaremos el color predeterminado, la cual es negro. Entonces, debes agregar un .attr(), pero ¿en qué color debes definirlo? Debe ser del color escrito en el paréntesis cuando ejecutas la función. drawSquare('red') debe significar .attr('red) y drawSquare('orange') debe significar .attr('orange'). Si ves la declaración de la función drawSquare, verás un parámetro llamado color. Ese color es una variable que se asignará un valor, como 'red' o 'white', cuando ejecutas la función. Siempre y cuando que la variable esté escrita dentro de las llaves, tendrá el valor que le asignó la llamada de función.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

function drawCircle(color) {
  circle.attr('r', 15)
    .attr('cx', 15)
    .attr('cy', 15)
    .attr('fill', color);
}
function drawSquare(color) {
  square.attr('width', 30)
    .attr('height', 30)
    .attr('x', 30)
    .attr('y', 0)
    .attr('fill', color);
}
drawCircle('blue');
drawSquare('green');

Conceptos de JavaScript: bloque de código (función), expresión de miembro, identificadores
Conceptos de D3: .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var circle = svg.append('circle');
var square = svg.append('rect');