Question

我有一个页面，使用d3.js显示一些数据。由于处理负载繁重，当页面加载时，它会冻结浏览器几秒钟。

我已经确定这种“浏览器锁定”行为主要是由于以下形式的一行：

selection.attr('d', linefn);

...其中选择包含大约10K项目。

我想用

之类的东西替换这一行

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;
}

...但是，AFAIK，这将“落后于API”，或者至少感觉就像它。是否有“官方”（即记录在案的）方式来实现相同的结果？

编辑：删除了shift变体（在成功完成第一个元素的处理之前，更新selection更安全。）

Answer 1

您只需使用.each()：

即可

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

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

1 个答案: