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

当svg有许多元素时，D3.js平移似乎比缩放更慢、更起伏。我在JSFIDLE上做了一个示例，下面也显示了代码

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可视化）

浏览器渲染所有元素需要更多的工作。但是有没有任何原因表明平移的行为与缩放不同？平移会在每个像素步重新绘制元素，而缩放则使用通常不在其间插值的离散级别。我还注意到，将矩形拆分为单独的组可以提高分辨率镀铬的平移速度-请参阅。我原以为添加更多svg组件会减慢平移速度。由于渲染引擎应用了优化和类似的功能，所以性能很难预测。