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

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

虽然可以从字面上按顺序 append 元素，但有延迟，必要的代码对于 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>

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

Delay to the next data item, appending one by one, time after time

javascript

delay

d3.js