javascript - 如何通过计算 d3.js 中的 `index` 值来添加动画延迟？

Question

我在一个组中有 2 个元素，并且我正在使用 selectAll 方法选择组。但我想在 transition 上为其子元素添加一些延迟。正确的做法是什么？

我的尝试根本不起作用:

var fadeHandler = function () {
    d3.selectAll('.subAppGroup') //parent group
        .each(function (d,i) {
            console.log("hi", i); //i am getting index here.
        })
        .transition()
        .delay((1000*1+=1)) //how to delay?
        .duration(500)
        .select('.subAppPath') //first child
        .style('opacity', 1);

    d3.selectAll('.subAppGroup')
        .transition()
        .delay((1000*1+=i)) //both not working
        .duration(500)
        .select('.subAppGroupDetail') //second child

        .style('opacity', 1);

}

fadeHandler();

Answer 1

您只需将逻辑放入函数中即可。i 将是数组中项目的索引。在下面的示例中，元素 0 将延迟 0 毫秒，元素 1 将延迟 100 毫秒，依此类推。

...
.delay(function(d, i) {
    return i * 100; // Or whatever you want the delay to be.
})
...

https://github.com/mbostock/d3/wiki/Transitions#delay

编辑:要回答下面的评论，请尝试此操作。我认为这会起作用，但在不知道您的数据是什么样子的情况下很难说。

var fadeHandler = function () {
    d3.selectAll('.subAppGroup .subAppPath, .subAppGroup .subAppGroupDetail')
        .transition()
        .delay(function(d, i) {
            return i * 100;
        })
        .duration(500)
        .style('opacity', 1);
}

fadeHandler();