javascript - D3.js implements first stage of transition but not 2nd

Question

Can anyone tell me why my circles transition to green but then do not transition to blue? I don't know if it's relevant but this is D3 on top of polymaps.

  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 。

Answer 2

这是另一种解决方案，它transition()在第一次转换结束时进行第二次调用。

svg.append("circle")
    .attr("r", 100)
    .transition()
    .delay(2000)
    .style("fill", "green")
    .each("end", function() {
        d3.select(this).transition()
        .delay(2000)
        .style("fill", "blue")
    });

该文档位于https://github.com/mbostock/d3/wiki/Transitions#wiki-each。

JSFiddle（基于mdml答案中的小提琴）：http: //jsfiddle.net/RuMdH/2/