Explicador de Semáforos
Semáforos
Objetivo de este acertijo: Poner el semáforo de abajo en verde.
Tutorial de la solución: Cuando ejecutes el código de inicio, verás que el círculo inferior es morado en lugar de verde. Si verificas el código, parece que el problema está en el último comando: bottomCircle.attr('fill', 'purple'); So, what is actually going on? bottomCircle es un identificador, o una variable, que representa el círculo inferior como esperarías. .attr() se usa para elegir un atributo o una propiedad del identificador al que está adjunto y cambiar el valor de ese atributo. En esta línea, .attr() está buscando el atributo 'fill', que es el color que llena su forma. Puedes ver que se llena con 'purple' cuando debería ser 'green'. Lo que tienes que hacer es cambiar el valor de ese string.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
topCircle.attr('fill', 'red');
middleCircle.attr('fill', 'orange');
bottomCircle.attr('fill', 'green');
Conceptos de JavaScript: identificadores, expresión de miembro
Conceptos de D3: .attr(‘fill’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):
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);