D3 sync transition for smooth animation

[comp...@gmail.com]

Hi,

 i have to develop a chart showing social datas over the time.

 The chart looks like a bubble chart mixed with a classic XY charts. 

 Each bubble is for a town and there are 3 dimensions : (X,Y,t) , t for time.

 The main of the chart is to animate over the time all the bubbles, with start, pause, resume and speed controls.

 Here is a screenshot : 

for the first time step :

and for the last time step :

it's fine and smooth from one time step to the next time step. But, there is a little "stop" animation before starting the next time step; the animation is not globally smooth during all the time steps. I'm not sure that i'm very clear in my explication, but let's go to show you how it was implemented :

first : i build the SVG classically like that : svg.selectAll("circle").data( bubbleArray ).append("circle").attr({ cx: ...., cy: ...,  r : ...., fill : ...., opacity : .... });

This is for the first time step. 

Next, the animation is built to have successions of transition() for each bubble. Here is the pseudo code :

 

           var d = 1500;  // duration for each transition between two time steps
            var nbSteps = 21; // numbers of time steps (here one step equals one year)
            var po = 0; // step index, initialized at 0
         
  // svg Text element for the legend
            var svgTitreIteration = d3.select("#titreIteration").text(times[0].text);

// svg circle elements for the bubbles          
            var svgBulles = svg.select("#dessin").selectAll("circle.territoire").transition().ease("linear").duration(d);

            function foo(transition) {
                po = po + 1;
                if (po <= nbSteps) {

                    (function (po) {

 // for each end iteration (time step) changing a legend text depending of the value of current time step
                        svgTitreIteration = svgTitreIteration.transition().duration(d).each("end", function () {
                        var lib = Math.trunc((self.smoothIterationsVersLibelle(self.smoothIterations(metaIterations[0].valeur + po))));
                        d3.select(this).text(lib);
                        });


// adding transition() for each bubble
                        svgBulles = svgBulles.transition().each(function (d, i) {
                            // get time step value  
                            var iteration = self.smoothIterations((metaIterations[0].valeur + po));

                            // get bubble
                            var bulle = d3.select(this);

                            // changing attributes according the time step value
                            bulle.transition().attr({
                                cy: yScale(functionY(iteration)),
                                cx: xScale(functionX(iteration)),
                                r: zScale(functionZ(iteration)),
                                fill: colorScale(functionZ(iteration)),
                                opacity: opacityScale(functionZ(iteration))
                            });
                        });

                        // calling foo for chaining transition
                        transition.call(foo);

                   })(po);
                }
            }

            // create the first transition
            d3.transition().delay(0).ease("linear").call(foo);

I'm using this chaining transition method because i have to synchronise multiple svg elements at each time step (like legend text and each bubble position).

This method doesn't includes now the pause/resume controls.

This works fine between two time step : the bubbles change positions smoothly from one time step to another.  Great. BUT, before starting the next changes (going to the next time step),  there is a stop moment during while all the bubbles are fixed (some milliseconds) then the animation resumes and is smooth to the next step time.

I'm looking for a solution to avoid this "stop moment". 

I suppose that this "stop moment" is the "17ms" delay that the document says; but how to avoid it?

If you have any idea to help me....thx a lot !

(excuse me for my english)

[comp...@gmail.com]

here is link to show the animation (controls are not functionnal) :

http://compastis.safetyhost.net/30m/bubble/bubble.html