Explicador de Reparación de robot
Objetivo de este acertijo: Arreglar el brazo y un ojo del robot.
Tutorial de la solución: Arreglar el ojo izquierdo es simple. Tienes que usar el botón leftEye y luego el botón .attr(). Ahora, puedes cambiar un atributo del ojo izquierdo. Para agrandar el ojo, necesitas un radio de 9. El atributo de radio se llama 'r', así que el comando completo es leftEye.attr('r', 9); El brazo derecho requiere más trabajo. Primero, definiremos el tamaño del brazo cambiando su altura a 5 con el atributo 'height'. Después, puedes seguir agregando al mismo comando de la misma forma que leftArm. El atributo 'width' se debe definir en 25 usando .attr('width', 25). Para que el color sea blanco, debes usar el atributo 'fill' y definirlo en el string 'white'. Los atributos 'x' e 'y' determinan la ubicación del brazo: 'x' se debe definir en 130, e 'y' se debe definir en 75. En general, el comando rightArm debe verse muy parecido al comando leftArm, sólo con valores 'x' e 'y' diferentes.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
leftArm.attr('height', 5)
.attr('width', 25)
.attr('fill', 'white')
.attr('x', 45)
.attr('y', 75);
rightArm.attr('height', 5)
.attr('width', 25)
.attr('fill', 'white')
.attr('x', 130)
.attr('y', 75);
leftEye.attr('r', 9);
Conceptos de JavaScript: identificadores, expresión de miembro
Conceptos de D3: .attr(‘height’,), .attr(‘width’,), .attr(‘fill’,), .attr(‘x’,), .attr(‘y’,), .attr(‘r’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):
var head = svg.append('rect');
head.attr('width', 50).attr('height', 30).attr('x', 75).attr('y', 20).attr('fill', 'grey');
var neck = svg.append('rect');
neck.attr('width', 10).attr('height', 10).attr('x', 95).attr('y', 50).attr('fill', 'white');
var body = svg.append('rect');
body.attr('width', 60).attr('height', 50).attr('x', 70).attr('y', 60).attr('fill', 'grey');
var leftEye = svg.append('circle').attr('fill', 'yellow').attr('cx', 89).attr('cy', 35).attr('r', 5);
var rightEye = svg.append('circle').attr('fill', 'yellow').attr('cx', 111).attr('cy', 35).attr('r', 9);
var leftArm = svg.append('rect');
var rightArm = svg.append('rect');
var leftFoot = svg.append('rect');
leftFoot.attr('height', 10).attr('width', 10).attr('fill', 'white').attr('x', 80).attr('y', 110);
var rightFoot = svg.append('rect');
rightFoot.attr('height', 10).attr('width', 10).attr('fill', 'white').attr('x', 110).attr('y', 110);
