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 );
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With