Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is this animation so slow in FireFox?

I'm using D3.js to manipulate some SVG elements. I learned (the hard way) that newer versions of FireFox don't really handle D3's force layout well. So I switched to a simple rotation and it's STILL running crappy in Firefox. In the following code, group1 is an array of 200 <circle> svg elements which I create dynamically:

function orbit( target, first ) {

  /* Other easing options here: https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease */
  var ease = ( first ) ? 'sin-in' : 'linear';

  target
    .transition()
    .duration(40000)
    .ease( ease )
    .attrTween("transform", rotTween)
    .each('end', function(){ orbit( group1, false ); } );

  function rotTween() {
      var i = d3.interpolate(0, 360);
      return function(t) {
          return "rotate(" + i(t) + ","+width/2+","+height/2+")";
      };
  }

}

orbit( group1, true );

It's perfect smooth in Chrome but it chugs along like a Choo Choo train in Firefox.

As requested, here is how group1 is selected:

var makeNode = function(coeficient, x, y) {
    coeficient = coeficient || 1;
    return {
        radius: (Math.random() * coeficient ).toFixed(2), 
        cx: function() { return x || Math.round(Math.random()*width) }, 
        cy: function() { return y || Math.round(Math.random()*height) }
    }
};

var nodes1 = d3.range(300).map( function(){ return makeNode(1.9); } );
var nodes2 = d3.range(700).map( function(){ return makeNode(.6); } );
// var nodes2 = [];

var svg = d3.select('#sky_svg');
var group1 = svg.append('g').attr("class", "group1");
var group2 = svg.append('g').attr("class", "group2");

var addNodes = function(group, nodes) {
    for (var i=0; i<nodes.length; i++){
        var node = nodes[i];
        var circle = group.append('circle');
        circle
            .attr("r", node.radius )
            .attr("cx", node.cx )
            .attr("cy", node.cy )
            .attr("stroke-width", 8 )
            .attr("stroke", "transparent")
            .style("fill", "#FFFFFF");
    }
}

addNodes( group1, nodes1 );
addNodes( group2, nodes2 );
like image 227
emersonthis Avatar asked Apr 05 '14 00:04

emersonthis


1 Answers

I also, consistently have problems with FireFox in rendering svg transformations that IE/Chrome handle with no problem. Follow the Posts:

Google Search: "Looking for SVG that was/is slow in Firefox"

You can also search on: Firefox's Gecko rendering engine+SVG, and see that Firefox has a poor rep for responsive SVG rendering.

My suggestion is to keep pressure on FireFox to fix this poor performance in dynamic SVG.

like image 118
Francis Hemsher Avatar answered Oct 11 '22 07:10

Francis Hemsher