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

- Pippi

Answer 1

问题：

在“transition”选择中为每个元素设置延迟。

解决方案：

使用带有function(d, i)的delay()。

说明：

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

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

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

- Gerardo Furtado