CODEWITHSUNDEEP
javascriptd3.js
George Sofianos
George Sofianos

Reputation: 1191

D3 transitions , less cpu usage?

I'm currently using d3 transitions to animate graphs. Unfortunately these transitions make the page to redraw continuously, as a result cpu is always around 100%. 

d3Element.attr("transform", "translate(" + this.someDistance + ")")
                                   .attr("d", linePath)
                                   .transition()
                                   .ease("linear")
                                   .duration(animationDuration)
                                   .attr("transform", "translate(" + 0 + ")");

I have already found a simple solution to this problem and I will share it with you but I would like to know if there is any better way to do it with d3.

Upvotes: 5

Views: 1162

Answers (1)

George Sofianos
George Sofianos

Reputation: 1191

What I'm actually doing to reduce cpu usage is to limit the frames per second.

This is a part of the code : 

var start = d3.transform( "translate(" + this.startPoint.x  + "," + this.startPoint.y + ")");
var stop  = d3.transform("translate(" + this.stopPoint.x   + "," + this.stopPoint.y  + ")");
var interpolate = d3.interpolateTransform(start,stop); 

   var animation_interval = window.setInterval(function(){

         frame++;
         // Get transform Value and aply it to the DOM
         var transformValue = interpolate(frame/(self.fps * self.duration));
         self.d3Selector.attr("transform", transformValue);

         // Check if animation should stop
         if(frame >= self.fps * self.duration || self.stopFlag){
               window.clearInterval(animation_interval);
               return;
         }


   },intervalTime);

Upvotes: 3

Related Questions