d3.js - How to efficiently remove first element from a selection? -

i have page displays data using d3.js. due heavy processing load, when page load freezes browser few seconds.

i have determined "browser locking" behavior due line of form:

selection.attr('d', linefn); 

...where selection contains around 10k items.

i replace line like

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

i'm looking efficient way implement either first , rest. naive guess like:

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

...but, afaik, going "behind api", or @ least feels it. there "official" (i.e. documented) way achieve same result?

edit: deleted shift variant (it's safer not update selection until after processing of first element has been completed).

you can use .each():

selection.each(function(d, i) {   settimeout(function() { d3.select(this).attr("d", linefn); }, * 100); });