使用 D3 逐个淡入小节

【问题标题】：Fade in bars one by one with D3使用 D3 逐个淡入小节
【发布时间】：2014-02-24 21:12:20
【问题描述】：

我有一个条形图，想在一些延迟的情况下逐个添加淡入淡出条的效果。这是我现在所拥有的，但它同时在所有path 的栏中消失。我怎样才能让它们一个接一个地出现？

.selectAll("path")
.attr "opacity", (d,i)->
        0
.transition().delay(3000).duration(1000)
.attr "opacity", (d,i)->
        1

【问题讨论】：

【解决方案1】：

回答

使用索引值错开延迟

 .delay(function(d,i){return i * 300;})

因为索引为零，这意味着第一项没有延迟。如果不希望这样做，那么您可以执行类似

的操作

 .delay(function(d,i){return (1+i) * 300;})

示例

对于那些不太熟悉 D3 的人来说，这个JSFiddle 上的一个简单示例

【讨论】：