Color Field es-419 Explainer

Explicador de Campo de colores

Objetivo de este acertijo:
Este acertijo usa conceptos de JavaScript que aprendiste previamente (variables y controladores de eventos) con conceptos de D3 enseñados anteriormente (método de transición, método de duración y atributo de relleno).

En concreto, usarás un controlador de eventos y una variable para animar el atributo `‘fill’`` de una forma SVG.

Tutorial de la solución:
En el código con el que comienzas, hay dos funciones, changeBottom y changeTop, y dos controladores de eventos. La función changeBottom crea una variable, randomColor, y define una animación de .transition() incompleta en bottom. La animación no está completa porque le falta un atributo y valor para que bottom cambie. La función changeTop hace lo mismo, pero con la variable top. Debajo de estas funciones hay dos controladores de eventos que especifican qué función se debe llamar cuando se pulsa top y bottom. En su estado actual, no sucede nada si pulsas el rectángulo. En este acertijo, completarás las animaciones dentro de las funciones, de modo que el rectángulo se anime cuando se pulse.

Para completar el acertijo, agrega .attr('fill', randomColor) a .duration(2000) dentro de las funciones changeTop y changeBottom. Ahora, cuando pulses la parte superior o inferior del rectángulo, su valor de color cambiará.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

function changeBottom () {
    let randomColor = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255));
    bottom.transition().duration(2000).attr('fill', randomColor)
}

function changeTop () {
    let randomColor = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255));
    top.transition().duration(2000).attr('fill', randomColor)
}

bottom.on('click', changeBottom)
top.on('click', changeTop)

Conceptos de JavaScript: variable, controladores de eventos, declaración de la función
Conceptos de D3: atributo, .transition(), .duration()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

var svg = canvas.append('g');

svg.attr('transform',`translate(${window.innerWidth/2},${window.innerHeight/2})`);

let bottom = svg.append('rect').attr('width', '160').attr('height', '70').attr('fill', 'rgb(255,112,54)').attr('x', -70).attr('y',40)
let top = svg.append('rect').attr('width', '160').attr('height', '135').attr('fill', 'rgb(248,169,51)').attr('x', -70).attr('y',-100)
1 Like