Question

我使用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 );

Answer 1

我也一直在使用FireFox来渲染IE / Chrome处理的svg转换时没有问题。关注帖子：

谷歌搜索：＆＃34;寻找Firefox中的SVG很慢＆＃34;

您还可以搜索：Firefox的Gecko渲染引擎+ SVG，并看到Firefox的响应式SVG渲染代表很差。

我的建议是对FireFox施加压力，以便在动态SVG中修复这种糟糕的性能。

为什么这个动画在FireFox中这么慢？

1 个答案: