Reset transition d3 v4

Question

Does anyone know how to "reset" a transition. I have a transition defined as follows:

this.paths.attr('transform', null) .transition() .duration(this.duration) .ease(d3.easeLinear) .attr('transform', 'translate(' + this.xScale(translationX) + ', 0)') 

I know what I can do

 this.paths.interrupt(); 

to stop the transition, but this does not complete my animation. I would like to be able to "reset" the transition, which will immediately complete the animation.

Answer 1

If I understand correctly (or maybe not), there is no ready-made solution for this, not succumbing to the hood. However, I believe that you can create functionality in a relatively simple way if selection.interrupt() has the form you are looking for.

To do this, you need to create a new method for choosing d3, which will access the transition data (located at selection.node().__transition ). Transition data includes data on twins, a timer and other details of the transition, but the simplest solution would be to set the duration to zero, which will cause the transition to complete and put it in its final state:

The __ transition data variable can have empty slots (from among the variables), which can cause grief in firefox (as far as I know when using forEach loops), so I used the keys approach to get a non-empty slot containing the transition.

 d3.selection.prototype.finish = function() { var slots = this.node().__transition; var keys = Object.keys(slots); keys.forEach(function(d,i) { if(slots[d]) slots[d].duration = 0; }) } 

If you work with delays , you can also activate a timer callback with something like: if(slots[d]) slots[d].timer._call(); , since setting the delay to zero does not affect the transition.

Using this code block, you call selection.finish() , which will force the transition to its final state, click the circle to call the method:

 d3.selection.prototype.finish = function() { var slots = this.node().__transition; var keys = Object.keys(slots); keys.forEach(function(d,i) { if(slots[d]) slots[d].timer._call(); }) } var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 500); var circle = svg.selectAll("circle") .data([1,2,3,4,5,6,7,8]) .enter() .append("circle") .attr("cx",50) .attr("cy",function(d) { return d * 50 }) .attr("r",20) .on("click", function() { d3.select(this).finish() }) circle .transition() .delay(function(d) { return d * 500; }) .duration(function(d) { return d* 5000; }) .attr("cx", 460) .on("end", function() { d3.select(this).attr("fill","steelblue"); // to visualize end event }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script> 

Of course, if you want to save the d3-ish method, return the selection so that after that you can bind additional methods. And for completeness, you need to make sure that there is a transition to completion. With these add-ons, the new method might look something like this:

 d3.selection.prototype.finish = function() { // check if there is a transition to finish: if (this.node().__transition) { // if there is transition data in any slot in the transition array, call the timer callback: var slots = this.node().__transition; var keys = Object.keys(slots); keys.forEach(function(d,i) { if(slots[d]) slots[d].timer._call(); }) } // return the selection: return this; } 

Here is bl.ock of this more complete implementation.

Answer 2

Reply Andrew is great. However, for the sake of curiosity, I believe that this can be done without extending the prototypes using .on("interrupt" as a listener.

Here, I shamelessly copy the Andrew code for the transitions and this answer to get the target attribute.

 selection.on("click", function() { d3.select(this).interrupt() }) transition.on("interrupt", function() { var elem = this; var targetValue = d3.active(this) .attrTween("cx") .call(this)(1); d3.select(this).attr("cx", targetValue) }) 

Here is a demo:

 var svg = d3.select("svg") var circle = svg.selectAll("circle") .data([1, 2, 3, 4, 5, 6, 7, 8]) .enter() .append("circle") .attr("cx", 50) .attr("cy", function(d) { return d * 50 }) .attr("r", 20) .on("click", function() { d3.select(this).interrupt() }) circle .transition() .delay(function(d) { return d * 500; }) .duration(function(d) { return d * 5000; }) .attr("cx", 460) .on("interrupt", function() { var elem = this; var targetValue = d3.active(this) .attrTween("cx") .call(this)(1); d3.select(this).attr("cx", targetValue) }) 

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="500" height="500"></svg> 

PS: Unlike Andrew answer , since I use d3.active(node) here, the click only works if the transition has started .