Mondrian pt-br Explainer

Explicação do desafio Mondrian

Objetivo deste desafio: Use o método attribute .attr() para definir a 'height' e a 'width' de um retângulo SVG.

Passo a passo da solução: O método attribute .attr() é usado para definir ou modificar os atributos das formas SVG. São necessários dois argumentos: o nome do atributo para mudar e o valor do atributo. Para definir a altura ou largura de um retângulo SVG, defina o 1º argumento de .attr() como 'height' ou 'width' e o 2º argumento como um número.

No código com o qual você começa, redSqaure já tem valores para 'height' e 'width', mas eles são muito pequenos. Neste desafio, você mudará 'height' e 'width' para deixar redSquare maior.

Para concluir o desafio, altere os valores de 'height' e 'width' para 90.

Solução do código de exemplo:

(Toque abaixo para revelar)


redSquare.attr('height', 90).attr('width', 90);

Conceitos de JavaScript: Variável

Conceitos de D3: Atributo

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


try {

var canvas = setupD3();

} catch (e) {

var canvas = d3.select('body').append('svg').attr('width',500).attr('height',500);

}

var svg = canvas.append('g');

svg.attr('transform',`translate(${window.innerWidth/12},${window.innerHeight/12})`);

var redSquare = svg.append('rect').attr('fill','red').attr('x',50).attr('y',10);

svg.append('rect').attr('fill','black').attr('x', 50).attr('y',100).attr('height', '45').attr('width', '45');

svg.append('rect').attr('fill','black').attr('x',175).attr('y',100).attr('height','15').attr('width','35');

svg.append('rect').attr('fill','yellow').attr('x',95).attr('y',100).attr('height', '22.5').attr('width', '45');

svg.append('rect').attr('fill','yellow').attr('x',175).attr('y',10).attr('height','55').attr('width','35');

svg.append('rect').attr('fill','blue').attr('x',140.5).attr('y',116).attr('height', '30').attr('width','70');

svg.append('rect').attr('fill','white').attr('x',95).attr('y',123).attr('height', '22.5').attr('width', '45');

svg.append('rect').attr('fill','white').attr('x',140).attr('y',10).attr('height', '105').attr('width','35');

svg.append('rect').attr('fill','white').attr('x',175).attr('y',65).attr('height','35').attr('width','35');

svg.append('rect').attr('fill','black').attr('x',50).attr('y',10).attr('height','135').attr('width','5');

svg.append('rect').attr('fill','black').attr('x',50).attr('y',9).attr('height','5').attr('width','164');

svg.append('rect').attr('fill','black').attr('x',210).attr('y',10).attr('height','135').attr('width','5');

svg.append('rect').attr('fill','black').attr('x',50).attr('y',145).attr('height','5').attr('width','165');

svg.append('rect').attr('fill','black').attr('x',140).attr('y',10).attr('height','135').attr('width','5');

svg.append('rect').attr('fill','black').attr('x',50).attr('y',100).attr('height','5').attr('width','164');

svg.append('rect').attr('fill','black').attr('x',95).attr('y',122.5).attr('height','5').attr('width','45');

svg.append('rect').attr('fill','black').attr('x',140).attr('y',115).attr('height','5').attr('width','70');

svg.append('rect').attr('fill','black').attr('x',175).attr('y',10).attr('height','105').attr('width','5');

svg.append('rect').attr('fill','black').attr('x',175).attr('y',65).attr('height','5').attr('width','35');