Golden Rectangle es-419 Explainer

Explicador de Rectángulo dorado

Objetivo de este acertijo: Agregar otro cuadrado al rectángulo dorado

Tutorial de la solución: Un rectángulo tiene 2 atributos que definen su tamaño: 'height' y 'width'. La altura de bigBox violeta debe ser igual a los cuadros azul (80) e índigo (130) combinados. 80 + 130 = 210, entonces bigBoxdebe tener una 'height' de 210. Dado que es un cuadrado, el ancho también debe ser 210.

Para definir los atributos, debes usar el método .attr(). El primer argumento será el string 'height' y el segundo argumento es 210. Para 'width', el primer argumento es 'width' y el segundo argumento es 210.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


bigBox.attr('width',210).attr('height',210);

Conceptos de D3: .attr('height',), .attr('width',)

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


let goldenRect = svg.append('g').attr('transform',`scale(${window.innerWidth/(340+20)})`);

goldenRect.append('rect').attr('width',10).attr('height',10).attr('x',0).attr('y',0).attr('fill','red');

goldenRect.append('rect').attr('width',10).attr('height',10).attr('x',10).attr('y',0).attr('fill','orange');

goldenRect.append('rect').attr('width',20).attr('height',20).attr('x',0).attr('y',10).attr('fill','yellow');

goldenRect.append('rect').attr('width',30).attr('height',30).attr('x',20).attr('y',0).attr('fill','lime');

goldenRect.append('rect').attr('width',50).attr('height',50).attr('x',0).attr('y',30).attr('fill','green');

goldenRect.append('rect').attr('width',80).attr('height',80).attr('x',50).attr('y',0).attr('fill','blue');

goldenRect.append('rect').attr('width',130).attr('height',130).attr('x',0).attr('y',80).attr('fill','indigo');

goldenRect.append('rect').attr('x',130).attr('y',0).attr('width',210).attr('height',210).attr('fill','none').attr('stroke','white').attr('opacity',0.1);

let bigBox = goldenRect.append('rect').attr('x',130).attr('y',0).attr('fill','violet').attr('opacity',0.9);