Donut Hole pt-br Explainer

Explicação do desafio Espaço morto

Objetivo do desafio:

Use o método attribute .attr() para definir o atributo do raio, 'r', de um círculo SVG.

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 o raio de um círculo SVG, defina o 1º argumento de .attr() como 'r' e o 2º argumento como um número. O raio é a distância do centro de um círculo até sua borda.

No código com o qual você começa, donutHole já tem um valor para 'r', mas o valor é pequeno. Queremos um espaço morto maior! Neste desafio, você alterará 'r' para fazer donutHole ficar maior.

Para concluir o desafio, mude o valor de 'r' para 15.

Solução do código de exemplo:

(Toque abaixo para revelar)


donutHole.attr('r', 15);

Conceitos de JavaScript: 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 donut = svg.append('circle').attr('fill','saddlebrown').attr('cx', 0).attr('cy', 0).attr('r',70);

var frosting = svg.append('circle').attr('fill','pink').attr('cx', 0).attr('cy', 0).attr('r',62);

var donutHole = svg.append('circle').attr('fill','#13324A').attr('cx', 0).attr('cy', 0).attr('r', 15).attr('stroke', 'saddlebrown').attr('stroke-width', 6);

var sprinkle_1 = svg.append('rect').attr('fill','orange').attr('x',0).attr('y',0).attr('height', '18').attr('width', '5').attr('transform', 'rotate(45 -20 -40)')

var sprinkle_2 = svg.append('rect').attr('fill','yellow').attr('x',0).attr('y',0).attr('height', '5').attr('width', '17').attr('transform', 'rotate(5 160 -500)')

var sprinkle_3 = svg.append('rect').attr('fill','yellow').attr('x',0).attr('y',0).attr('height', '5').attr('width', '19').attr('transform', 'rotate(-35 55 0)')

var sprinkle_4= svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '20').attr('width', '5').attr('transform', 'rotate(45 70 -30)')

var sprinkle_5= svg.append('rect').attr('fill','orange').attr('x',0).attr('y',0).attr('height', '13').attr('width', '5').attr('transform', 'rotate(-15 -150 -90)')

var sprinkle_6 = svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '5').attr('width', '13').attr('transform', 'rotate(45 -50 0)')

var sprinkle_7= svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '10').attr('width', '5').attr('transform', 'rotate(-45 20 -45)')