Javascript 如何使用d3转换使圆一个接一个地出现？

我在绕圈子：

我在下面创建了一个圆圈，我希望随着数据集的更新，这个圆圈会一个接一个地出现。例如，如果数据长度为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);

---

问题：

为“转换”选择中的每个元素设置延迟

解决方案：

将

delay（）

与

函数（d，i）

说明：

您必须在

transition（）之后添加以下内容：

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

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