如何使用 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 是每个元素的延迟（以毫秒为单位）。