Flower Power pt-br Explainer

Explicação de Poder das flores

Objetivo deste desafio: Mudar o tamanho de todas as pétalas.

Passo a passo da solução: O tamanho de um círculo é determinado por seu raio. O nome do atributo raio é apenas 'r'. Você pode usar .attr() em um identificador (como petal2) para definir um novo valor para o raio. Para este desafio, é necessário que todas as pétalas tenham um raio de 25 pixels - o mesmo que o center. Para isso, é preciso mudar o número dentro de cada .attr() de 12 para 25.

Solução do código de exemplo:

(Toque abaixo 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);

Conceitos de JavaScript: Identificadores, expressão de membro

*Conceitos de D3: .attr(‘r’,)

Código Adicional (código oculto executado antes do código do desafio):


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