意外的转换行为D3

Question

我试图循环三次D3转换。由于某种原因，最后一条命令似乎被脚本忽略，我不知道为什么。

下面的脚本中的圆应该减小半径并过渡到白色填充。我不知道它为什么不是 - 在控制台中没有任何东西出现。

任何想法 - 并希望它不是荒谬的。过渡http://jsfiddle.net/Guill84/ww1r42ym/

全码：

function transitionx(size) { 

    marker.transition() 
    .duration(7500) 
    .ease('quad') 
    .style("fill", "red") 
    .attr("r", size) 
    .each("end", function() { 
     marker.transition() 
     .attr("r", size * 1.2) 
     .duration(3000) 
     .each("end", function() { 
      marker.transition() 
      .attr("r", size/1.2) 
      .duration(3000) 
      .style("fill", "white") 
      .each("end", transitionx(size)) 
     }) 
    }) 
} 

Answer 1

当你这样做：

.each("end", transitionx(size)) 

你立即调用transitionx并通过它的结果。

如果transitionx没有争论，这会工作：

.each("end", transitionx) 

但是，因为transitionx有争论，你现在正在做正确的等价于：

.each("end", transitionx()) 

解决方案：您必须将其包装在一个功能中：

.each("end", function() { 
    transitionx(size) 
}) 

这是与该改变你的代码（我将所有的持续时间由10，使人们更快）：

var size = 40 
 

 
//Create a sized SVG surface within viz: 
 
var sampleSVG = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", 200) 
 
    .attr("height", 200); 
 

 
//Add to the svg surface a circle, with size position, 
 
var marker = 
 
    sampleSVG.append("circle") 
 
    .style("stroke", "gray") 
 
    .style("fill", "white") 
 
    .attr("r", size) 
 
    .attr("cx", 50) 
 
    .attr("cy", 50) 
 

 
transitionx(size); 
 
//give the object some behaviour: 
 
function transitionx(size) { 
 

 
    marker.transition() 
 
     .duration(750) 
 
     .ease('quad') 
 
     .style("fill", "red") 
 
     .attr("r", size) 
 
     .each("end", function() { 
 
      marker.transition() 
 
       .attr("r", size * 1.2) 
 
       .duration(300) 
 
       .each("end", function() { 
 
        marker.transition() 
 
         .attr("r", size/1.2) 
 
         .duration(300) 
 
         .style("fill", "white") 
 
         .each("end", function() { 
 
          transitionx(size) 
 
         }) 
 
       }) 
 
     }) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>