Explicação de Quatro a cinco
Objetivo deste desafio: Use o método .append() para criar uma nova forma SVG.
Passo a passo da solução: O método .append() é usado para criar uma forma SVG. É preciso um argumento: o nome de uma forma.
No código com o qual você começa, o dado tem quatro círculos. Neste desafio, você editará a variável five para que ela crie um novo círculo e o dado mude de quatro para cinco.
Para concluir o desafio, anexe .append() ao final de svg. Defina o argumento de .append() para 'circle'. Por último, dê um tamanho ao círculo usando .attr() para definir o raio do círculo, 'r', para 10.
Solução do código de exemplo:
(Toque abaixo para revelar)
var five = svg.append('circle').attr('r', 10)
Conceitos de JavaScript: Variável
Conceitos de D3: Atributo, .append()
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})`);
svg.append('rect').attr('height', '100').attr('width', '100').attr('fill','white').attr('x', -50).attr('y', -50)
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', -30).attr('cy',-30);
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', 30).attr('cy',30);
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', -30).attr('cy',30);
svg.append('circle').attr('r', 10).attr('fill','black').attr('cx', 30).attr('cy',-30);