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