Wrecking Ball Puzzle Explainer

#1

Aim of the puzzle :
Use the attribute method .attr() with 'transform' to rotate an SVG shape.

Walk through of solution :
The attribute method .attr() is used to set or modify the attributes of SVG shapes. It takes two arguments: the name of the attribute to change, and the value for the attribute. To rotate an SVG shape, set the first argument of .attr() to 'transform' and the second argument to 'rotate(__ __ __)' with three numbers inside the parentheses. The numbers inside 'rotate()' represent, in order: degrees clockwise to rotate the shape, x coordinate of the origin of the rotation, y coordinate of the origin of the rotation.

In the code that you start off with, the wreckingBall already has a 'transform' attribute and 'rotate()' value but they are incorrect. In this puzzle, you’ll change the numbers inside 'rotate()' to swing the wreckingBall into the wall.

To complete the puzzle, change the angle of the rotation by updating the first number inside of 'rotate()' to -10.

Sample code solution:
(Tap below to reveal)

wreckingBall.attr('transform','rotate(-10 150 0)');

Javascript Concepts: Variable
D3 Concepts: Attribute
Additional Code:

svg.append('rect').attr('width',window.innerWidth-150).attr('height',window.innerHeight).attr('x',200).attr('fill','slategray');
let wreckingBall = svg.append('g');
wreckingBall.append('line').attr('x1',150).attr('y1',0).attr('x2',150).attr('y2',200).attr('stroke-width',5).attr('stroke','silver');
wreckingBall.append('circle').attr('r',30).attr('cx',150).attr('cy',200).attr('fill','black');
svg.append('circle').attr('r',10).attr('cx',150).attr('fill','grey');
0 Likes

listed #2
0 Likes