Flower Power es-419 Explainer

Explicador de Poder de las flores

Objetivo de este acertijo: Cambiar el tamaño de todos los pétalos.

Tutorial de la solución: El radio determina el tamaño de un círculo. El nombre del atributo radio es solo 'r'. Puedes usar .attr() en un identificador (como petal2) para definir un nuevo valor para su radio. Para este acertijo, todos los pétalos deben tener un radio de 25 pixeles, igual que center. Para hacerlo, debes cambiar el número dentro de cada .attr() de 12 a 25.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


center.attr('r', 25);

petal1.attr('r', 25);

petal2.attr('r', 25);

petal3.attr('r', 25);

petal4.attr('r', 25);

petal5.attr('r', 25);

petal6.attr('r', 25);

Conceptos de JavaScript: identificadores, expresión de miembro

Conceptos de D3: .attr(‘r’,)

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


var petal1 = svg.append('circle').attr('fill','red').attr('cx', 200).attr('cy', 62);

var petal2 = svg.append('circle').attr('fill','red').attr('cx', 170).attr('cy', 80);

var petal3 = svg.append('circle').attr('fill','red').attr('cx', 230).attr('cy', 80);

var petal4 = svg.append('circle').attr('fill','red').attr('cx', 170).attr('cy', 120);

var petal5 = svg.append('circle').attr('fill','red').attr('cx', 230).attr('cy', 120);

var stem = svg.append('rect');

stem.attr('width', 10).attr('height',120).attr('fill','green').attr('x', 195).attr('y', 140);

var petal6 = svg.append('circle').attr('fill','red').attr('cx', 200).attr('cy', 138);

var center = svg.append('circle').attr('fill','yellow').attr('cx', 200).attr('cy', 100);

var ground = svg.append('rect');

ground.attr('width', 400).attr('height',60).attr('fill','green').attr('x', 0).attr('y', 220);