为何d3.v4中.delay()方法无法按预期迭代执行？

嘿，我之前刚好踩过这个坑！你遇到的情况，大概率是因为transition被绑错了选择集，导致delay函数里的i没拿到每个柱状条的正确索引。

问题根源 #

在D3 v4里，delay()回调的(d, i)参数中，i是当前元素在你调用transition的那个选择集里的索引。要是你把transition绑定到了包含所有柱子的父容器（比如一个<g>标签）上，那这个选择集里只有1个元素，i自然一直是0，所有柱子就会同时启动动画。

正确写法示例 #

你得把transition直接绑定到每个柱状条的元素选择集上，这样每个柱子的i才会是0、1、2……依次递增：

// 假设已完成比例尺、SVG容器初始化
const bars = svg.selectAll(".bar")
  .data(yourDataArray)
  .enter()
  .append("rect")
  .attr("class", "bar")
  // 设置动画初始状态（比如高度为0，底部对齐）
  .attr("x", d => xScale(d.category))
  .attr("width", xScale.bandwidth())
  .attr("y", height) // height是SVG容器的高度
  .attr("height", 0);

// 给每个柱子单独添加transition
bars.transition()
  .duration(500) // 单根柱子的动画时长
  .delay((d, i) => i * 100) // 这里的i就是每个柱子的正确索引了
  .attr("y", d => yScale(d.value))
  .attr("height", d => height - yScale(d.value));

快速排查方法 #

你可以在delay回调里加个日志，看看输出的i值：

.delay((d, i) => {
  console.log("当前元素索引：", i);
  return i * 100;
})

如果输出全是0，那肯定是transition绑到了父容器上——赶紧改成直接绑到每个柱子的选择集就行。

额外小提醒 #

D3 v4里enter()返回的选择集，已经是每个数据对应的新元素，直接对它调用transition就能拿到正确索引，不用绕到父元素那里哦～

内容的提问来源于stack exchange，提问作者Ahmad