Explicador de Cuatro a cinco
Objetivo de este acertijo:
Usar el método .append() para crear una nueva forma SVG.
Tutorial de la solución:
El método append, .append(), se usa para crear una forma SVG. Toma un argumento: el nombre de una forma.
En el código con el que comienzas, el dado tiene cuatro círculos. En este acertijo, editarás la variable five para que cree un círculo nuevo y el dado cambiará de cuatro a cinco.
Para completar el acertijo, adjunta .append() al final de svg. Define el argumento de .append() como 'circle'. Por último dale al círculo un tamaño usando .attr() para definir el radio del círculo, 'r', como 10.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
var five = svg.append('circle').attr('r', 10)
Conceptos de JavaScript: variable
Conceptos de D3: atributo, .append()
Código adicional (código oculto que se ejecuta antes del código del acertijo):
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);