Fill It Up es-419 Explainer

Explicador de Llénalo

Objetivo de este acertijo: Cambiar el color del cuerpo del saltamontes a verde lima.

Tutorial de la solución: El saltamontes se hace con 2 formas: head y body. Cada forma es un object que contiene varias propiedades o atributos. Para definir el valor de estos atributos, debes usar el método .attr(). El primer argumento es el nombre del atributo que quieres cambiar, y el segundo argumento es el nuevo valor para ese atributo. El color de una forma se llama su atributo ‘fill’`.

Para que body sea del mismo color que head, define su atributo 'fill' como 'lime'.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


head.attr('fill','lime');

body.attr('fill','lime');

Conceptos de D3: attr('fill',)

Código adicional (código oculto que se ejecuta antes del código del acertijo):


//Create Group

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

var head = grasshopper.append('path').attr('d','M761.15,157.3H730.21c0-34.59,8.18-68.32,22.31-99.37,6.51-14.31-4.16-30.55-19.88-30.55a21.86,21.86,0,0,0-19,11.09A239.76,239.76,0,0,0,681.89,157.3h0A216.16,216.16,0,0,0,818.08,358.12l10.4,4.14V224.63A67.33,67.33,0,0,0,761.15,157.3Z');

var body = grasshopper.append('path').attr('d','M501.2,92.5,339,27.38c0,52.43,24.29,110.07,45.28,129.92H171.11c20.5,112.51,165,205,308.15,205h0L410.6,431c-15.37,15.37-4.49,41.65,17.25,41.65h0a24.4,24.4,0,0,0,17.25-7.15L548,362.62l1.29.53v84.25c0,13.44,10.51,25,23.94,25.21A24.4,24.4,0,0,0,598,448.22v-86h48.8v85.14c0,13.43,10.51,25,23.94,25.21a24.4,24.4,0,0,0,24.86-24.4v-86h0C695.65,239.87,622,142,501.2,92.5Z');