Make multiple delays in chained transitions in D3.JS

Question

I am moving a rectangle from point a to point i in a picture, i want to mark a stop delay of 5s for each point (there are 8 points). the transitions work fine in the code below (the delay works only for point b).The problem is that i can't add more delays for my other transitions.

Is there any way to do it ?

Thank you all in advance.

function TRANSITION(access,dur=10000,Delay=5000,b=390.5,c=523,d=632.5,e=810.8,f=942.5,g=1063,h=1196,i=1334.5)
            {
                access.transition().duration(dur).attr('x',b)
                .transition().delay(Delay).duration(dur).attr('x',c)
                .transition().duration(dur).attr('x',d)
                .transition().duration(dur).attr('x',e)
                .transition().duration(dur).attr('x',f)
                .transition().duration(dur).attr('x',g)
                .transition().duration(dur).attr('x',h)
                .transition().duration(dur).attr('x',i)
            }

You want to move one point, wait 5 seconds, move the next point, wait 5 seconds, etc...? What is access? A selection of the points? — Mark, Jan 28 '17 at 19:18

score 0 · Accepted Answer · answered Jan 28 '17 at 19:04

You could add a transition that changes no attributes but still has a duration:

.transition()
.duration(dur)
.attr('x',d)
.transition()    // don't transition anything
.duration(5000)  // but take five seconds doing it
.transition()
.duration(dur)
.attr('x',e)

I've only tested this in version 4, so it is possible that this might not work in version 3. Alternatively, you could add the .attr line in the delaying transition if you were to leave some attribute the same.

Make multiple delays in chained transitions in D3.JS

1 Answers1