javascript - D3.js 实现过渡的第一阶段而不是第二阶段

Question

谁能告诉我为什么我的圆圈会变成绿色但不会变成蓝色？我不知道它是否相关，但这是 polymaps 之上的 D3。

  marker.append("svg:circle")
        .attr("r", 4.5)
        .transition()
        .delay(2000)
        .style("fill", "green")
        .transition()
        .delay(2000)
        .style("fill", "blue")
        ;

Answer 1

您遇到的问题来自您的延迟。虽然过渡的延迟会使动画停止给定的毫秒数，但它根本不会停止 Javascript 的执行。因此，正在发生的是两个过渡同时发生，因此您只能看到向蓝色的过渡。尝试让第二次转换稍后发生，如下所示:

marker.append("svg:circle")
      .attr("r", 4.5)
      .transition()
      .delay(2000)
      .style("fill", "green")
      .transition()
      .delay(4000) // change to 4000 from 2000
      .style("fill", "blue");

完整的 JSfiddle here .