javascript - 如何使用d3过渡使圆圈一个接一个出现？

Question

我在关注圈子example :

我创建了下面的圆圈，我希望不透明度过渡是随着数据集的更新，圆圈将开始一个接一个地出现。例如，如果数据长度为 5，则出现圆圈 1，然后出现圆圈 2，...最后出现圆圈 5。如果更新数据使其长度为 2，则出现圆圈 1，然后出现圆圈 2。我该怎么做这个效果？到目前为止，transition() 统一地处理数据集。

    circle.enter().append("circle")
        .attr("class", "dot");

    // Update (set the dynamic properties of the elements)
    circle
        .attr("r", 5)
        .attr("cy", 20)
        .attr("cx", function(d,i){return i*50;})
        .attr("fill", "red");

    svg.selectAll("circle")
        .style("opacity", 0)
        .transition()
        .duration(1000)
        .style("opacity", 1);

Answer 1

问题:

为“过渡”选择中的每个元素设置延迟。

解决方案:

使用 delay() 和 function(d, i)

说明:

你必须在 transition() 之后添加:

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

其中 someNumber 是每个元素的延迟，以毫秒为单位。