如何使用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

<强>问题：

为＆＃34;转换中的每个元素设置延迟＆＃34;选择。

<强>解决方案：

将delay()与function(d, i)

一起使用

<强>说明：

您必须在transition()之后添加此内容：

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

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