Spacecraft Overhaul pt-br Explainer

Explicação de Revisão da nave espacial

Objetivo deste desafio: Consertar a espaçonave modificando seus atributos.

Passo a passo da solução: Há três coisas erradas com a nave:

  1. A crossbar deveria ser preenchida com 'grey'

  2. A rightWing deveria ter uma altura de 200

  3. A cabin deveria ter um raio de 30 e um 'cy' de 130.

Para alterar cada um desses atributos, você usa a função .attr(). São necessários dois argumentos dentro dos parênteses separados por uma vírgula. O 1º argumento é uma string, por isso está entre aspas. Este deve ser o nome do atributo que você deseja mudar, como: 'fill' ou 'x'. O 2º argumento é o valor para esse atributo e pode ser uma string ou número, como: 'grey' ou 200. Portanto, primeiro encontre o identificador que deseja mudar e siga a cadeia .attr() até ver o nome da propriedade que você precisa ajustar. Então, dentro desse mesmo conjunto de parênteses do nome da propriedade, altere o valor (seja um número ou uma string).

Solução do código de exemplo:

(Toque abaixo 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);

Conceitos de JavaScript: Expressão de Membro, Identificadores

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

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

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)');