Color Wheel es-419 Explainer

Puzzle Explainer
#1

Explicador de Rueda de color

**Objetivo de este acertijo **:

Usar el método de atributo .attr() para definir 'fill' de una forma SVG para darle color.

Tutorial de la solución:

El método de atributo .attr() se usa para definir o modificar los atributos de formas SVG. Toma dos argumentos: el nombre del atributo para cambiar y el valor del atributo. Para definir el color de una forma SVG, define el primer argumento de .attr() como 'fill' y el segundo argumento como color.

En el código de inicio, redCircle, yellowCircle y blueCircle ya tienen atributos 'fill' y valores de color. orangeCircle, greenCircle y purpleCircle no tienen atributos 'fill' y, por lo tanto, su valor de color por defecto es negro. En este acertijo, usarás el método de atributo y la propiedad de ‘fill’ para darles a orangeCircle, greenCircle y purpleCircle los valores de color correctos.

Para completar el acertijo, agrega .attr() al final de los círculos, donde falta. Agrega 'fill' como un argumento y un string del color correspondiente como el segundo argumento. Por ejemplo, greenCircle.attr(‘fill’, ‘green’)`.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


redCircle.attr('fill','red');

orangeCircle.attr('fill', 'orange');

yellowCircle.attr('fill','yellow');

greenCircle.attr('fill','green');

blueCircle.attr('fill','blue');

purpleCircle.attr('fill','purple');

Conceptos de JavaScript: string, variable

Conceptos de D3: atributo

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})`);

var blueCircle = svg.append('circle').attr('r', 20).attr('cx', 50).attr('cy', 0).attr('fill','blue');

var purpleCircle = svg.append('circle').attr('r', 16).attr('cx',25).attr('cy', 43);

var redCircle = svg.append('circle').attr('r', 20).attr('cx', -25).attr('cy', 43).attr('fill','red');

var orangeCircle = svg.append('circle').attr('r', 16).attr('cx', -50).attr('cy', 0);

var yellowCircle = svg.append('circle').attr('r', 20).attr('cx', -25).attr('cy', -43).attr('fill','yellow');

var greenCircle = svg.append('circle').attr('r',16).attr('cx', 25).attr('cy', -43);
#2
#3