我正在使用 D3.js 来操作一些 SVG 元素。我了解到(艰难的方式)较新版本的 FireFox 并不能很好地处理 D3 的强制布局。所以我切换到一个简单的旋转,它仍然在 Firefox 中运行糟糕。在以下代码中,group1
是一个包含 200 个 <circle>
的数组我动态创建的 svg 元素:
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 );
它在 Chrome 中非常流畅,但在 Firefox 中却像 Choo Choo 火车一样前进。
按照要求,这里是如何group1
被选中:
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 );
最佳答案
我也一直在使用 FireFox 渲染 IE/Chrome 处理的 svg 转换时遇到问题。关注帖子:
Google 搜索:“寻找在 Firefox 中运行缓慢的 SVG”
您还可以搜索:Firefox 的 Gecko 渲染引擎+SVG,您会发现 Firefox 在响应式 SVG 渲染方面表现不佳。
我的建议是对 FireFox 施加压力,以修复动态 SVG 中的这种不良性能。
关于javascript - 为什么这个动画在 FireFox 中这么慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22875328/