D3转换,减少CPU使用？

Question

我目前正在使用d3过渡来动画图形.不幸的是,这些转换会使页面不断重绘,因此cpu总是在100%左右.

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

我已经找到了解决这个问题的简单方法,我将与您分享,但我想知道是否有更好的方法来解决这个问题.

Answer 1

我实际上为减少 CPU 使用量所做的是限制每秒帧数。

这是代码的一部分：

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);