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

Question

我正在关注圆圈示例：

我创建了下面的圆圈，我希望使不透明度转换成为随着数据集更新，圆圈将开始一个接一个出现。例如，如果数据长度为 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 是每个元素的延迟（以毫秒为单位）。