Broken Hearted es-419 Explainer

Puzzle Explainer
#1

Explicador de Con el corazón roto

Objetivo de este acertijo: Ensamblar las formas en un corazón rojo.

Tutorial de la solución: Para comenzar, el cuadro debe girar 45 grados por la esquina superior izquierda. La esquina superior izquierda se define por sus atributos 'x' e 'y' que son 101 y 33. Para girar, debes cambiar el atributo 'transform' y definirlo con valor de 'rotate(45 101 33)'; recuerda que los tres números en el string 'rotate' son grados hacia la derecha, las coordenadas x e y del eje de giro. Luego es necesario mover movedCircle al punto (68, 68). Eso significa que debes definir sus coordenadas 'cx' y 'cy' como 68. Recuerda que los círculos usan 'cx' y 'cy' para la “coordenada x central” y la “coordenada y central”, y los rectángulos usan 'x' e 'y' para las coordenadas de la esquina superior izquierda. Luego, para littleCircle debes cambiar el radio a 48 usando su atributo 'r'. Por último, las tres formas deben colorearse 'red' modificando el atributo 'fill'.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


square.attr('x', 101)

.attr('y', 33)

.attr('transform', 'rotate(45 101 33)')

.attr('fill', 'red');

movedCircle.attr('cx', 68)

.attr('cy', 68)

.attr('fill', 'red');

littleCircle.attr('r', 48)

.attr('fill', 'red');

Conceptos de JavaScript: Identifiers, Member Expression

Conceptos de D3: .attr(‘x’,), .attr(‘y’,), .attr(‘transform’,), .attr(‘fill’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘r’,)

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


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

var square = svg.append('rect').attr('width',95).attr('height',96);

var movedCircle = svg.append('circle').attr('r',48);

var littleCircle = svg.append('circle').attr('cx',133).attr('cy',68);

let scale = window.innerHeight/(190);

svg.attr('transform',`scale(${scale})`);
#2
#3