Color Wheel pt-br Explainer

Explicação do desafio Roda de cores

Objetivo do desafio: Usar o método attribute .attr() para definir o 'fill' de uma forma SVG para dar cor a ela.

Passo a passo da solução: O método attribute .attr() é usado para definir ou modificar os atributos das formas SVG. São necessários dois argumentos: o nome do atributo para mudar e o valor do atributo. Para definir a cor de uma forma SVG, defina o 1º argumento de .attr() para 'fill' e o 2º argumento para uma cor.

No código com o qual você começa, redCircle, yellowCircle e blueCircle já têm atributos 'fill' e valores de cor. orangeCircle, greenCircle e purpleCircle não têm atributos 'fill' e, portanto, seu valor de cor padrão é o preto. Neste desafio, você usará o método attribute e preencherá a propriedade para dar a orangeCircle, greenCircle, e purpleCircle os valores de cor corretos.

Para concluir o desafio, adicione .attr() ao final dos círculos que estão faltando. Adicione 'fill' como 1º argumento e uma string da cor correspondente como 2º argumento. Por exemplo, greenCircle.attr('fill', 'green')

Solução do código de exemplo:

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

Conceitos de JavaScript: String, Variável

Conceitos de D3: Atributo

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


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