延迟到下一个数据项，一次又一次地附加

Question

我只需要延迟圆圈（一个一个出现），但这delay()被忽略了。  D3_svg.selectAll().data(lst).enter().append("circle")  .attr('cx', d => d.x).attr('cy', d => d.y)  // position  .attr("r", 10).style("fill","red")          // layout  .transition().delay(2000)                   // time to the next有很多复杂的建议（例子），使用定时器等等，我需要最简单的。

Answer 1

虽然可以逐字地按顺序附加元素，但有延迟，必要的代码对于 D3 来说太麻烦了，而且你最终会向后弯腰：在我看来，你想要的只是元素出现在屏幕依次，一个一个。它们可以同时附加。

在这种情况下，我们将使用一个简单的selection.transition. 但是，我们需要转换一些属性：不能将不存在转换为存在，这是没有意义的。

使元素显示在屏幕中的最简单方法是转换其不透明度。对于延迟，采用元素索引（第二个参数）的函数就足够了。例如，每 1 秒一个元素：

.delay(function (_,i){

    return i * 1000

});

这是一个基本的演示：

d3.select("svg").selectAll(null)

  .data(d3.range(50).map(() => [Math.random() * 300, Math.random() * 150]))

  .enter()

  .append("circle")

  .attr("r", 5)

  .style("fill", "teal")

  .style("stroke", "white")

  .attr("cx", d => d[0])

  .attr("cy", d => d[1])

  .style("opacity", 0)

  .transition()

  .duration(0)

  .delay(function(_, i) {

    return i * 200

  })

  .style("opacity", 1)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg></svg>