Geek asks and answers

Transitions D3 - pause and resume

I am trying to understand "pause" and "resume" for D3 transitions from this guide . Although I understand how a “pause” works, I get a little lost when it comes to “resuming”. I could not understand the meaning of the author, in particular the "linear" or the first resume resume . My question is: what to do e.attr("T",0);and for .attr("T",1);sure?

I use the resume function for playback for a video or waveform example here: jsfiddle

+5
source share
2 answers

The code e.attr("T",0)also .attr("T",1)sets the attributes for the node that is selected. That is, a new attribute “T” is created and set. The purpose of this is solely to facilitate stopping and resuming - 0 represents a transition to the beginning 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 textbook indicates, this can be used to get the state of the transition at any time - you just need to request the value "T". If you also save a specific transition, you can use the value to pause and resume at any time.

, "" . () . , - , .

+4

, , , , . :

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

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

, e T c , . , :

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

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

#time, T 0, , T 1 .

0

More articles:


All Articles