Explicação de Interruptor de luz
Objetivo deste desafio: Faça a função turnOn girar o interruptor e acender a luz.
Passo a passo da solução: Ao tocar no interruptor de luz, ele executará a função turnOn, mas essa função está vazia. Precisamos fazer duas coisas: mudar o interruptor de luz para 35 e mudar a cor da lâmpada para amarelo. Isso pode ser feito com duas chamadas .attr(). Primeiro, lightSwitch precisa ter uma nova localização vertical, o que significa que seu atributo 'y' deve ser definido. Para tornar a lightBulb amarelo, é necessário mudar seu atributo 'fill' para 'yellow'.
Solução do código de exemplo:
(Toque abaixo para revelar)
function turnOn() {
lightSwitch.attr('y', 35);
lightBulb.attr('fill', 'yellow');
}
lightSwitch.on('click', turnOn);
Conceitos de JavaScript: Bloco de Código (função), Expressão de Membro, Identificadores
Conceitos de D3: .attr(‘y’,), .attr(‘fill’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
var switchPlate = svg.append('rect');
switchPlate.attr('width', 40).attr('height', 70).attr('fill', 'white').attr('x', 50).attr('y',30).attr('stroke','grey');
var innerPlate = svg.append('rect');
innerPlate.attr('width', 30).attr('height', 60).attr('fill', 'lightgrey').attr('x', 55).attr('y',35);
var lightSwitch = svg.append('rect');
lightSwitch.attr('width', 30).attr('height', 30).attr('fill', 'grey').attr('x', 55).attr('y', 65);
var stem = svg.append('rect');
stem.attr('width', 2).attr('height', 100).attr('fill', 'grey').attr('x', 180);
var base = svg.append('rect');
base.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 100).attr('stroke','grey');
var base2 = svg.append('rect');
base2.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 107).attr('stroke','grey');
var base3 = svg.append('rect');
base3.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 114).attr('stroke','grey');
var lightBulb = svg.append('circle');
lightBulb.attr('r', 30).attr('fill', 'black').attr('cx', 181).attr('cy', 152);