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。

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/

D3.js实现了第一阶段的过渡但不是第二阶段

2 个答案: