French Flag Fixer es-419 Explainer

Explicador de Corrector de la bandera francesa

Corrector de la bandera francesa

Objetivo de este acertijo: Restaurar la bandera francesa cambiando el ancho y alto de las franjas.

Tutorial de la solución: Cada franja de la bandera francesa está almacenada en una variable que vas a acceder a sus atributos de ‘height’ y ‘width’ usando la llamada de función .attr(). Todo lo que está antes del punto corresponde al nombre de la variable del color, la llamada de función .attr() cambiará. Dentro del paréntesis, tú le dices a .attr() qué atributo quieres cambiar y cuál debe ser su valor. Todas las franjas deben tener 50 de ancho y 100 de alto. Eso significa que debes cambiar el ancho de la franja azul a 100. Se ve así blueStripe.attr('width', 100). Observa que 'width' está entre comillas porque la función .attr() siempre está buscando un string. Puedes cambiar la altura de la franja blanca de una forma similar, simplemente cambia el valor de su atributo de altura a 100.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

blueStripe.attr('width', 50)
  .attr('height', 100);
whiteStripe.attr('width', 50)
  .attr('height', 100);
redStripe.attr('width', 50)
  .attr('height', 100);

Conceptos de JavaScript: expresión de miembro, indexación
Conceptos de D3: .attr(‘width’,), .attr(‘height’,)

Código adicional (código oculto que se ejecuta antes del código del acertijo):

var blueStripe = svg.append('rect')
    .attr('fill','blue')
    .attr('x',50)
    .attr('y',50);
var whiteStripe = svg.append('rect')
    .attr('fill','white')
    .attr('x',100)
    .attr('y',50);
var redStripe = svg.append('rect')
    .attr('fill','red')
    .attr('x',150)
    .attr('y',50);