Fixing the Transition

Shapes should always have a starting position before animating them to prevent unexpected behavior.

In this lecture, we are going to start fixing the transition. We know where the problem lies. For shapes entering the document, their starting positions are not ideal. We will want to change their starting positions before starting the animation.

Manually handling the selections

If we want to set the initial coordinates for the bars before starting the transition, we will need to override the join() function’s default behavior. The argument we are passing into the join() function is a string. It is the name of the element we want to add, update, or remove. Instead of passing in a string, we will pass in an arrow function.

Get hands-on with 1200+ tech skills courses.