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

当 svg 包含许多元素时，D3.js 平移似乎比缩放更慢且更不稳定。我在 JSFiddle 上做了一个例子http://jsfiddle.net/cornhundred/cfeu1ws2/10/ 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 可视化）。