D3.js 如何有效地从选择中删除第一个元素？

我有一个使用

d3.js

显示一些数据的页面。由于处理负载很重，页面加载时会将浏览器冻结几秒钟

我已经确定，这种“浏览器锁定”行为主要是由于一行表单造成的：

selection.attr('d', linefn);

…其中所选内容包含约10000项

我想用这样的东西来代替这一行

function process_rest () {
    if (selection.size() > 0) {
       var next_item = first(selection);  // function first() is hypothetical!
       next_item.attr('d', linefn);
       selection = rest(selection);       // function rest() is hypothetical!
       setTimeout(process_rest, 100);
       return;
    }
    finish_up();
}
setTimeout(process_rest, 100);

我正在寻找一种有效的方法来实现

first

和

rest

。我非常天真的猜测是：

function first(selection) {
    return d3.select(selection[0][0]);
}

function rest(selection) {
    selection[0] = selection[0].slice(1);
    return selection;
}

…但是，好吧，这是“在API后面”，或者至少感觉是这样。是否有一种“官方”（即记录在案的）方法来实现相同的结果

编辑：删除了

shift

变量（在第一个元素的处理成功完成之前，不更新

选择更安全）。
您可以简单地使用：

谢谢，这是一个好主意，尽管在我的例子中，设置一大堆延迟的函数调用是行不通的，因为还有其他事情要做，只有在所有这些延迟的调用完成之后才能发生。（这就是
finish up
位在我公认的混乱代码中应该表示的内容；我现在已经修复了它。）你需要为触发
finish\u up
函数设置一个单独的超时，并根据Amelia的建议，根据
selection.size（）
+1设置其延迟。或者，您可以简单地将当前元素的索引传递给您的样式中的函数，并递增该索引，检查是否超过最大索引。上述（您的“天真猜测”）可能比较“粗糙”，但应该可以工作，其中一个更改是您的
rest
函数应该测试
selection[0]
是否为空，如果是这样，切掉外部数组的第一个条目。要在更复杂的情况下使用类似的方法，请注意：（a）您正在弄乱选择的索引编号，因此无法使用它们；（b）切片数组不会是d3选择，尽管您的
第一个
方法通过重新选择节点来处理。
selection.each(function(d, i) {
  setTimeout(function() { d3.select(this).attr("d", linefn); }, i * 100);
});