Javascript 意外转换行为D3

我正在尝试循环一个三重D3转换。出于某种原因，脚本似乎忽略了最后一个命令，我不知道为什么

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

任何想法-希望这不是什么可笑的事情

完整的过渡代码：

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))
         })
     })
 }

执行此操作时：

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

您正在立即调用

transitionx

，并传递其结果

如果

transitionx

没有参数，这将起作用：

.each("end", transitionx)

但是，由于

transitionx

具有参数，因此您现在所做的工作相当于：

.each("end", transitionx())

解决方案：必须将其包装在函数中：

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

下面是您的代码和更改（我将所有持续时间除以10，以使其更快）：

var size=40
//在viz内创建大小为SVG的曲面：
var sampleSVG=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）；
//在svg曲面上添加一个圆形，带有大小和位置，
var标记=
sampleSVG.append（“圆”）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.attr（“r”，尺寸）
.attr（“cx”，50）
.attr（“cy”，50）
transitionx（大小）；
//给对象一些行为：
函数转换X（大小）{
marker.transition（）
.持续时间（750）
.ease（'quad'））
.样式（“填充”、“红色”）
.attr（“r”，尺寸）
.每个（“结束”，函数（）{
marker.transition（）
.attr（“r”，尺寸*1.2）
.持续时间（300）
.每个（“结束”，函数（）{
marker.transition（）
.attr（“r”，尺寸/1.2）
.持续时间（300）
.样式（“填充”、“白色”）
.每个（“结束”，函数（）{
transitionx（尺寸）
})
})
})
}

“希望这不是什么可笑的事情”。。。好吧，这并不可笑，但我相信在他/她的JS学习过程中，每个人都会遇到这样的事情：在你无意的时候立即执行一个函数。