javascript - 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's comment解释了为什么以您的方式使用 setTimeout 不起作用，并介绍了使用 d3.transition 的替代方法。

StackSlave's comment讲解如何正确使用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 docs了解更多信息。