Golden Rectangle pt-br Explainer

Explicação de Retângulo dourado

Objetivo deste desafio: Acrescentar outro quadrado ao retângulo dourado

Passo a passo da solução: Um retângulo tem 2 atributos que definem seu tamanho: 'height' e 'width'. A altura da bigBox violeta deve ser tão alta quanto as caixas azul (80) e anil (130) combinadas. 80 + 130 = 210, portanto o bigBox deve ter uma 'height' de 210. Como é um quadrado, a largura também deve ser 210.

Para definir os atributos, você usa o método .attr(). O 1º argumento será a string 'height' e o segundo 2º, 210. Para a 'width', o 1º argumento é 'width' e o 2º argumento é 210.

Solução do código de exemplo:

(Toque abaixo para revelar)


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

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

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


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);