Traffic Lights pt-br Explainer

Explicação de Semáforo

Objetivo deste desafio: Deixar o círculo inferior do semáforo verde.

Passo a passo da solução: Quando você executa o código inicial, vê que o círculo inferior é roxo ao invés de verde. Se você verificar o código, parece que o problema está no último comando: bottomCircle.attr('fill', 'purple'); Então, o que realmente está acontecendo? bottomCircle é um identificador ou variável que representa o círculo inferior como você espera. .attr() é usado para escolher um atributo ou propriedade do identificador a que está anexado e alterar o valor desse atributo. Nesta linha, o .attr() está encontrando o atributo 'fill' que é a cor com a qual a forma é preenchida. É possível ver que ele está sendo preenchido com 'purple' quando deveria ser 'green'. Tudo o que você precisa fazer é mudar o valor dessa única string.

Solução do código de exemplo:

(Toque abaixo para revelar)


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

middleCircle.attr('fill', 'orange');

bottomCircle.attr('fill', 'green');

Conceitos de JavaScript: Identificadores, expressão de membro

Conceitos de D3: .attr(‘fill’,)

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


var topCircle = svg.append('circle').attr('r', 25).attr('cx', 25).attr('cy', 25);

var middleCircle = svg.append('circle').attr('r', 25).attr('cx', 25).attr('cy',75);

var bottomCircle = svg.append('circle').attr('r', 25).attr('cx', 25).attr('cy',125);