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