Four To Five pt-br Explainer

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