D3 transitions - pause and resume

Question

I am trying to understand 'pause' and 'resume' for D3 transitions from this guide. While I understand how 'pause' is working, I am little lost when it comes to 'resume'. I couldn't make sense of the author's explanation, specifically the 'linear' or first resume explanation. My question is what is e.attr("T",0); and .attr("T",1); doing exactly?

I am applying the resume functionality to a playhead for video or waveform example here: jsfiddle

Answer 1

The code e.attr("T",0) and .attr("T",1) sets attributes for the node that is selected. That is, a new attribute "T" is created and set. The purpose of this is purely to facilitate stopping and resuming -- 0 represents a transition before start and 1 at the end.

If this attribute is included in the transition, the value will gradually change from 0 to 1. As the author of the tutorial points out, this can be used to get the state of the transition at any point in time -- you simply need to query the value of "T". If you save the particular transition as well, you can use the value to pause and resume at any point.

Note that there is nothing special about "T". You can use any (unused) attribute name. The purpose is only to have some way of telling how far the transition has progressed.