当存在许多（数千个）SVG元素时，为什么D3.js平移比缩放慢？

Question

当svg有许多元素时，D3.js平移似乎比变焦更慢，更不稳定。我在JSFiddle http://jsfiddle.net/cornhundred/cfeu1ws2/10/上做了一个例子，代码也显示在下面

var num_rect = 3000;

var zoom = d3.behavior.zoom()
    .on("zoom", zoomed);

function zoomed() {
    console.log('zooming or panning');
    d3.select('svg')
        .select('#rect_group')
        .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

svg = d3.select("body")
    .append("svg:svg").attr("width", 800).attr("height", 800)
    .call(zoom);

var rect_group = d3.select('svg')
    .append('g')
    .attr('id', 'rect_group');

var data = _.range(num_rect);

var color = d3.scale.linear().domain([0, num_rect]).range(['red', 'blue']);

rect_group.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('height', 175)
    .attr('width', 5)
    .attr('x', function (d) {return 50 + d / (0.003 * num_rect);})
    .attr('y', 50)
    .style('fill', function (d) {return color(d);});

在这个例子中，我将num_rects矩形并排添加到svg上并添加一些着色，因此它清晰有许多矩形。每当调用缩放函数时，我也会创建一个控制台日志。

将num_rect增加到大约3000以上会导致平移不稳定，同时变焦保持平滑。这可以在可视化的行为或控制台日志的频率中看到 - “缩放或平移”。这很奇怪，因为我希望平移比cpu密集而不是缩放。

此行为似乎也是特定于浏览器的 - 我只在chrome中看到这一点（这也很奇怪，因为Chrome通常是渲染D3.js可视化效果最好的）。