我可以使用 d3 转换来错开任意函数的执行吗？如果可以，怎么做？答案

【问题标题】：Can I use a d3 transition to stagger execution of an arbitrary function, and if so, how?我可以使用 d3 转换来错开任意函数的执行吗？如果可以，怎么做？
【发布时间】：2014-03-21 17:12:19
【问题描述】：

我有一个比较复杂的 update() 函数，它在名为 tool_animations 的大型数组的每个元素上执行。

我想错开函数本身的执行，而不是在这个函数中进行转换：

playback_transition = d3.transition()
.delay(function(){ return (elem_dur_in_ms * curr_index); })
.duration(0);

d3.selectAll(tool_animations)
    .each(function() {
        this.update();
});

虽然滥用了转换，但我最初认为我可能会得到类似以下的工作。（现在很明显，这只是将转换的参数向下传递到 update() 调用）。

d3.selectAll(tool_animations)
    .each(function() {
        var curr_arr_elem = this;
        playback_transition.call(curr_arr_elem.update);
});

知道如何错开更新调用本身吗？感谢任何建议，最好是基于 d3 的，没有 jQuery。谢谢:-)

【问题讨论】：

如果我理解您正在尝试正确执行的操作，您可以将end event listener 添加到您错开的转换中并调用您要在处理程序中调用的函数。
发现，简单的改变，立即生效：'playback_transition.each("end", function(){ curr_array_elem.update(); });'
太好了，我将其添加为参考答案。

标签： javascript d3.js transitions

【解决方案1】：

D3 允许您将event listeners 添加到过渡中。也就是说，您可以在转换开始或结束时调用一个函数。在您的情况下，您可以使用“结束”侦听器来错开呼叫。只需像以前一样使用延迟初始化转换并添加以下代码：

.each("end", functionToCall);

【讨论】：

【解决方案2】：

你可以用 setTimeout 做到这一点：

d3.selectAll(tool_animations)

    .each( function(d,i) {
        var curr_arr_elem = this;
        setTimeout( function () {
            playback_transition.call(curr_arr_elem.update);
        }, i * 100 );
    });

【讨论】：