Javascript 为什么.delay（）不能正确迭代？

我正在使用

d3.v4.min.js

生成下面代码段中的条形图。 由于未知原因，

transition（）.delay（）

函数的行为异常。 我将函数

（d，I）=>{return I*100}

作为参数传递，以使每列在开始动画之前等待100毫秒的倍数。至少，这是我所期望的，因为

I

的值应该是

0,1,2

但是，所有列都会立即启动动画，我已经在
dealy（）
函数中找到了
I
的根本原因。它在所有迭代中都固定为零

我犯了什么错误


//jshint esnext:true
常量边距={顶部：30，底部：70，左侧：40，右侧：10}；
常数宽度=600，高度=200；
常量color=d3.scaleOrdinal（d3.schemeCategory 20）；
常数数据=[{姓名：'ahmad'，年龄：22}，
{姓名：'saleh'，年龄：15}，
{姓名：'fulan'，年龄：35}，
{姓名：'fazil'，年龄：48}，
{姓名：'majid'，年龄：50}
];
const svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.风格（“背景色”、“米色”）；
const max=d3.max（数据，d=>{return d.age；}）；
常数min=0//1 | | d3.min（数据，d=>{返回d.age；}）；
常量y=d3.scaleLinear（）.domain（[min，max]）.range（[height-margin.bottom，margin.top]）；
常数yAxis=d3.axisLeft（）.scale（y）；
常量x=d3.scaleBand（）
.domain（data.map（d=>{return d.name；}））
.范围（[margin.left，width margin.right]）
.填充（0.4）；
const xAxis=d3.axisBottom（）.scale（x）；
svg.append（“g”）.attr（“class”，“y轴”）.attr（“transform”，“translate”（+margin.left+”，0）”）.call（yAxis）；
svg.append（“g”）.attr（“class”、“x轴”）.attr（“transform”、“translate（0）”+（height margin.bottom）+”）.call（xAxis）；
const selection=svg.selectAll（“.name”）.data（数据）；
常量enter=selection.enter（）.append（“g”）.attr（“类”、“名称”）；
const exit=selection.exit（）；
输入.append（“rect”）.attr（“x”，d=>{return x（d.name）；}）.attr（“y”，y（0））.attr（“width”，x.bandwidth（））.attr（“height”，0）.attr（“fill”，d=>{return color（d.name）；}）；
//问题就在这里。我不明白为什么每次迭代动画都不延迟。
输入。选择全部（“rect”）
.transition（）
.延迟（（d，i）=>{
/*console.log（i）；*///这会为所有迭代打印0。为什么？
返回100*i；
})
.持续时间（1000）
.轻松（d3.轻松弹性）
.attr（“y”，d=>{返回y（d.age）；}）
.attr（“height”，d=>{returny y（0）-y（d.age）；}）
在您的代码
中，enter
是对
元素的选择，每个元素只有一个
。因此，请使用
select
而不是
selectAll
：

enter.select("rect")
    //etc...

这是您修改过的代码：


//jshint esnext:true
常量边距={顶部：30，底部：70，左侧：40，右侧：10}；
常数宽度=600，高度=200；
常量color=d3.scaleOrdinal（d3.schemeCategory 20）；
常数数据=[{姓名：'ahmad'，年龄：22}，
{姓名：'saleh'，年龄：15}，
{姓名：'fulan'，年龄：35}，
{姓名：'fazil'，年龄：48}，
{姓名：'majid'，年龄：50}
];
const svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.风格（“背景色”、“米色”）；
const max=d3.max（数据，d=>{return d.age；}）；
常数min=0//1 | | d3.min（数据，d=>{返回d.age；}）；
常量y=d3.scaleLinear（）.domain（[min，max]）.range（[height-margin.bottom，margin.top]）；
常数yAxis=d3.axisLeft（）.scale（y）；
常量x=d3.scaleBand（）
.domain（data.map（d=>{return d.name；}））
.范围（[margin.left，width margin.right]）
.填充（0.4）；
const xAxis=d3.axisBottom（）.scale（x）；
svg.append（“g”）.attr（“class”，“y轴”）.attr（“transform”，“translate”（+margin.left+”，0）”）.call（yAxis）；
svg.append（“g”）.attr（“class”、“x轴”）.attr（“transform”、“translate（0）”+（height margin.bottom）+”）.call（xAxis）；
const selection=svg.selectAll（“.name”）.data（数据）；
常量enter=selection.enter（）.append（“g”）.attr（“类”、“名称”）；
const exit=selection.exit（）；
输入.append（“rect”）.attr（“x”，d=>{return x（d.name）；}）.attr（“y”，y（0））.attr（“width”，x.bandwidth（））.attr（“height”，0）.attr（“fill”，d=>{return color（d.name）；}）；
//问题就在这里。我不明白为什么每次迭代动画都不延迟。
输入。选择（“rect”）
.transition（）
.延迟（（d，i）=>{
/*console.log（i）；*///这会为所有迭代打印0。为什么？
返回100*i；
})
.持续时间（1000）
.轻松（d3.轻松弹性）
.attr（“y”，d=>{返回y（d.age）；}）
.attr（“height”，d=>{returny y（0）-y（d.age）；}）
这确实解决了我的问题。再次阅读您的答案，并编辑我的评论。谢谢，过一会儿我就可以接受你的回答了，btw@Ahmad我用
selectAll
添加了另一个示例。你明白其中的区别了吗？现在有道理了。非常感谢