我在一个组中有 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();
最佳答案
您只需将逻辑放入函数中即可。 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();
关于javascript - 如何通过计算 d3.js 中的 `index` 值来添加动画延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30419594/