如何在 d3 中实现异步

Question

我想在一段时间后更改圆圈的颜色。我尝试使用 setTimeout，但它不起作用。有什么办法可以解决这个问题吗？

var circles = svg.selectAll("circle").data(data)
                .enter().append("circle")
                .attr("r", "10")
                .attr("fill","lightblue")
circles.attr('fill',function(){
            setTimeout(function(){return "red"},2000)
         })

Answer 1

Gerardo的评论解释了为什么以你的方式使用setTimeout不起作用，并提出了使用d3.transition的替代方法。

StackSlave的评论解释了如何正确使用setTimeout来解决问题。

有关解决问题的方法，请参阅以下示例。

const data = [10, 15, 20, 30, 35];
const radius = 10; // px
const yPos = 35; // px
const svg = d3.select('svg');
const circles = svg.selectAll("circle").data(data)
  .enter().append("circle")
  .attr("r", radius)
  .attr("transform", function(d, i) {
     return `translate(${(i+1) * 3 * radius}, ${yPos})`; 
   })
   .attr("fill", "lightblue");
// using setTimeout
setTimeout(function() {
  circles.attr("fill", "red");
}, 2000);
// using d3
circles
  .transition()
  .duration(2000)
  .ease(() => 0) // disable fading
  .style("fill", "red");
// using d3 - recommended (see Gerardo's comment below)
circles
  .transition()
  .duration(0)
  .delay(2000)
  .style("fill", "red");

查看 d3.transition 文档以了解更多信息。