The aim of this puzzle: Remove the line and make the buoy float to the top.
Walkthrough of the solution: All the work you need to do will be inside of the
cutLine function definition – the block of code between the curly brackets
cutLine function will run once you tap on the tether (the grey rectangle). First, you want the line to go away, and you can do that by using
line.remove(); The other part of the puzzle is to make the buoy float to the top. And because you want it to be animated, this will require a transition. You know to start the command as:
buoy.transition() After that, you need to specify what the transition is transitioning to – the surface of the water. A vertical position between 30 and 60 will do just that, so
.attr('cy', 50) would work. Remember that the
.attr() should come after the
.transition() but as part of the same command. How do you make the buoy bounce at the top? By changing its easing:
.ease(d3.easeElastic) will make the transition use a springy effect when moving the circle. One last step is to slow down the animation by changing the duration.
.duration() sets the number of milliseconds for the transition to complete its animation. For this puzzle, anything over 500ms will work, but a number closer to 4000 probably looks more realistic.
Sample code solution:
(Tap below to reveal)
Since this is the final card of the Animations I course and it is testing your knowledge, there is no sample solution code.
D3 Concepts: .append(), .attr(‘width’,), .attr(‘height’,), .attr(‘x’,), .attr(‘y’,), .attr(‘fill’,), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .remove(), .transition(), .duration(), .ease(), .on(‘click’,)