javascript - 意外的过渡行为 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>