D3 transitions - pause and resume

问题:

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

回答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.

回答2:

I've been struggling with this exact problem too and I think there's a typo on the example that has been throwing me off. Where the author writes:

var e = d3.select("#time");
e.attr("T",0);

c.transition()
    .duration( time )
    .ease( "linear" )
    .attr("T",1);

It seems as though e will update its T attribute as c transitions, which doesn't make sense. Instead I think it should be as follows:

var e = d3.select("#time");
e.attr("T",0);

e.transition()
    .duration( time )
    .ease( "linear" )
    .attr("T",1);

Now we select the #time element, set the initial value of its T attribute to 0 then add a transition to the same element that changes T to 1 over the course of the specified duration.