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