Change object attribute following transition D3

Question

I want to give an object an attribute once a transition is finished. I'm simply updating an images position as follows:

tmp.transition().duration(1000)
                    .attr("transform", function(d) {return 'translate(' + 
                    coordinates[d].x +',' + 
                    coordinates[d].y + ')'})

Once it finishes, I want to give the object tmp an attribute "moved" with the value "no". I tried:

tmp.transition().duration(1000)
     .attr("transform", function(d) {return 'translate(' + 
            coordinates[d].x +',' + 
            coordinates[d].y + ')'}).end('moved', 'no')

But without success. Any tips? Thanks,

score 5 · Accepted Answer · answered Jun 18 '12 at 01:52

5

According to the documentation, you can use .each:

tmp.transition().duration(1000)
 .attr("transform", function(d) {return 'translate(' + 
        coordinates[d].x +',' + 
        coordinates[d].y + ')'}
 ).each('end', function() {
     d3.select(this).attr('moved', 'no');
     // or maybe also this.setAttribute('moved', 'no');
 });

answered Jun 18 '12 at 01:52

Felix Kling

795,719
175
1,089
1,143

and `each` with "start" for the opposite. this is very handy, thanks – pstanton Aug 29 '17 at 07:21

score 0 · Answer 2 · answered Jun 18 '12 at 00:43

You can tell javascript to wait for a period of time and run code after using window.setTimeout. You simply have to sync both events up by using the same number of milliseconds.

window.setTimeout(function(){
    //Your fake "callback" code here
}, 1000);

score 0 · Answer 3 · answered Mar 26 '15 at 10:54

In response to @user1066286 (and because I cannot post comments): you shouldn't use setTimout() here! Appart from it being bad practice, you cannot guarantee that the transition will actually be completed when the timeout stops.

From the d3 Transition docs:

Transitions have a four-phase life cycle:

The transition is scheduled. The transition starts. The transition runs. The transition ends.

Each of these four phazes are processed asynchronously, so there's no way to know how long the transition actually takes. It maight be a little slower then the user-defined duration, it might be a little faster.

score 0 · Answer 4 · answered Feb 01 '23 at 19:40

@Felix Klings answer appears to be deprecated. See https://stackoverflow.com/a/10692220/14095529 (block below is quote from that answer).

// d3 v5
d3.select("#myid").transition().style("opacity","0").on("end", myCallback);

// old way
d3.select("#myid").transition().style("opacity","0").each("end", myCallback);

Change object attribute following transition D3

4 Answers4