Donut Hole es-419 Explainer

Puzzle Explainer
#1

Explicador de Espacio muerto

**Objetivo de este acertijo **:

Usar el método de atributo .attr() para definir el atributo de ratio 'r' de una forma SVG.

Tutorial de la solución:

El método de atributo .attr() se usa para definir o modificar los atributos de formas SVG. Toma dos argumentos: el nombre del atributo para cambiar y el valor del atributo. Para definir el radio de un círculo SVG, define el primer argumento de .attr() como 'r' y el segundo argumento como número. El radio es la distancia desde el centro de un círculo hasta su borde.

En el código de inicio, donutHole ya tiene un valor para 'r', pero el valor es pequeño. ¡Queremos un agujero más grande! En este acertijo, cambiarás 'r' para que donutHole sea más grande.

Para completar el acertijo, cambia el valor de 'r' a 15.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


donutHole.attr('r', 15);

Conceptos de JavaScript: variable

Conceptos de D3: atributo

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

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)')
#2
#3