Mondrian es-419 Explainer

Puzzle Explainer
#1

Explicador de Mondrian

**Objetivo de este acertijo **:

Usar el método de atributo .attr() para definir 'height' y 'width' de un rectángulo SVG.

Tutorial de la solución:

El método de atributo .attr() se usa para definir o para modificar los atributos de formas SVG. Toma dos argumentos: el nombre del atributo para cambiar y el valor del atributo. Para definir el alto o ancho de un rectángulo SVG, define el primer argumento de .attr() como 'height' o 'width' y el segundo argumento como número.

En el código de inicio, redSqaure ya tiene valores para 'height' y 'width', pero estos valores son muy pequeños. En este acertijo , cambiarás 'height' y 'width' para agrandar redSquare.

Para completar el acertijo, cambia los valores 'height' y 'width' a 90.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


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

Conceptos de JavaScript: variable

Conceptos de D3: atributo

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


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');
1 Like
#2
#3