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

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){&nbsp; &nbsp; return i * 1000});这是一个基本的演示：d3.select("svg").selectAll(null)&nbsp; .data(d3.range(50).map(() => [Math.random() * 300, Math.random() * 150]))&nbsp; .enter()&nbsp; .append("circle")&nbsp; .attr("r", 5)&nbsp; .style("fill", "teal")&nbsp; .style("stroke", "white")&nbsp; .attr("cx", d => d[0])&nbsp; .attr("cy", d => d[1])&nbsp; .style("opacity", 0)&nbsp; .transition()&nbsp; .duration(0)&nbsp; .delay(function(_, i) {&nbsp; &nbsp; return i * 200&nbsp; })&nbsp; .style("opacity", 1)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><svg></svg>