Question

我试图循环三次D3过渡。出于某种原因，脚本似乎忽略了最后一个命令，我不确定原因。

以下脚本中的圆圈应缩小半径并转换为白色填充。我不确定为什么它不是 - 并且控制台中没有任何东西出现......？

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

完整的过渡代码：

const listOfObjects = [{id: 1, selected: false}, {id: 2, selected: true}],
      getSelected = a => a.selected,
      find = a => a.find(getSelected),
      result = find(listOfObjects);

console.log(result);

Answer 1

执行此操作时：

transitionx

您立即呼叫transitionx并传递结果。

如果.each("end", transitionx)没有参数，这将有效：

transitionx

但是，由于.each("end", transitionx())有参数，你现在正在做的事情相当于：

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

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

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

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

＆＃13;

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

＆＃13;

     =IFERROR(INDEX(INDIRECT("A" & SUM(MATCH(1,COUNTIF(A505, $A$1:$A$463),0),1)):$A$463,MATCH(1,COUNTIF($B$509,INDIRECT("K" & SUM(MATCH(1,COUNTIF(A505, $A$1:$A$463),0),1)):$K$463),0),),"")

＆＃13;

意外的过渡行为D3

1 个答案: