Rainbow Treasure es-419 Explainer

Explicador de Tesoro del arcoíris

Objetivo de este acertijo: Cambiar el color de la olla negra a dorado cuando la pulses.
Tutorial de la solución: El cambio que debes hacer para resolver este acertijo es muy simple: solo cambia el string 'black' a 'gold' y el string 'rect' a 'circle'. Pero veamos por qué esos son los cambios correctos que se deben hacer. La variable firstCircle debe almacenar el primer círculo que se dibujó en la pantalla. El código d3.select() busca en la pantalla el primer object agregado que es una forma determinada. Debido a que quieres seleccionar un círculo, debes cambiar 'rect' a 'circle'. El siguiente fragmento de código es una función que se supone que cambia el color de la olla a dorado. La parte principal que se debe ver es .attr() porque ahí es donde se cambia la propiedad de color. Solo tienes que definir el atributo 'fill' en el string 'gold'. Ahora, cuando se ejecute la función turnToGold, tomará firstCircle y cambiará su color a dorado. El último segmento de código es donde el programa detecta que pulsas el círculo y ejecuta el código dentro de la función turnToGold.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)

var firstCircle = d3.select('circle');

function turnToGold() {
  firstCircle.transition()
    .attr('fill', 'gold');
}

firstCircle.on('click', turnToGold);

Conceptos de JavaScript: bloque de código (función), identificadores, expresión de miembro, declaración de variable
Conceptos de D3: .select(), .transition(), .attr(‘fill’,), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var colors = ['black','red','orange','yellow','green','blue','purple','violet'];
var x = 0;
var y = 0;

for (var i=0; i<colors.length; i++) {
    x = window.innerWidth/2 - 70*Math.cos(Math.PI*i/(colors.length-1)); // 400/2...
    y = window.innerHeight/2 - 70*Math.sin(Math.PI*i/(colors.length-1)) + 30; // 250/2...
    svg.append('circle').attr('fill',colors[i]).attr('r',35).attr('cx',x).attr('cy',y);
}
1 Like