All examples By author By category About

dribnet

strokes - General Update Pattern, II

strokes fork and port of mike's general update pattern tutorial, II.

merge requests should go to the example in the repo


By adding a key to the data-join, letters that are already displayed are put in the update selection. Now updates can occur anywhere in the array, depending on the overlap between the old letters and the new letters. The text content only needs updating on enter because the mapping from letter to element never changes; however, the x-position of the text element must now be recomputed on update as well as enter.

It'll be easier to see what's going on when we add animated transitions next!

Next: Update Transitions

Previous: General Update Pattern