如何在d3.js中通过计算' index '值来增加动画延迟

How to add delay on animation by calculating `index` value in d3.js?

本文关键字：index 延迟 动画 增加 计算 d3 js      更新时间：2023-09-26

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

My try is not working all:

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();

您只需要将逻辑放入函数中。I将是数组中该项的索引。在下面的示例中，元素0将延迟0ms，元素1将延迟100ms，依此类推。

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

https://github.com/mbostock/d3/wiki/Transitions延迟编辑:要回答你下面的评论，试试这个。我认为这将工作，但很难说不知道你的数据看起来像什么。

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