Spacecraft Overhaul es-419 Explainer

Explicador de Reparación de nave espacial

Objetivo de este acertijo: Reparar la nave espacial modificando sus atributos.

Tutorial de la solución: La nave tiene tres cosas malas:

  1. crossbar debe ser coloreado 'grey'

  2. rightWing debe tener una altura de 200

  3. cabin debe tener un radio de 30 y un 'cy' de 130.

Para cambiar cada uno de estos atributos, debes usar la función .attr(). Toma dos argumentos dentro de su paréntesis que están separados por coma. El primer argumento es un string, por lo que está dentro de unas comillas. Este debe ser el nombre del atributo que quieres cambiar, como: 'fill' o 'x'. El segundo argumento es el valor para ese atributo, y podría ser un string o un número, como: 'grey' o 200. Entonces, primero busca el identificador que quieres cambiar y sigue la cadena .attr() hasta que veas el nombre de la propiedad que necesitas ajustar. Luego, dentro del mismo conjunto de paréntesis que el nombre de la propiedad, cambia el valor (sea un nombre o un string).

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


leftWing.attr('width', 30)

.attr('height', 200)

.attr('x', 60)

.attr('y', 30);

rightWing.attr('width', 30)

.attr('height', 200)

.attr('x', 210)

.attr('y', 30);

crossbar.attr('width', 150)

.attr('height', 10)

.attr('x', 75)

.attr('y', 125)

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

cabin.attr('r', 30)

.attr('cx', 150)

.attr('cy', 130);

Conceptos de JavaScript: expresión de miembro, identificadores

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

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


svg.attr('transform','translate(0,-20)');

var leftWing = svg.append('rect');

var rightWing = svg.append('rect');

var crossbar = svg.append('rect');

var cabin = svg.append('circle');

leftWing.attr('fill','rgb(153,153,153');

rightWing.attr('fill','rgb(153,153,153)');

cabin.attr('fill','rgb(28,28,28)');