Question

我试图通过D3.js重复一个动画但只有x次。让我们说10次。我使用了一个while循环，但这是一个很大的失败。

<!DOCTYPE html>
<meta charset="utf-8">

<body>

<!-- load the d3.js library -->    
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>

var svg = d3.select("body")
        .append("svg")
        .attr("width", 960)
        .attr("height", 500);

function circleTransition() { 
    var timeCircle = svg.append("circle")
        .attr("fill", "steelblue")
        .attr("r", 20);
    repeat();

    var i=0

    function repeat() {
      timeCircle
        .attr('cx', 40)      // position the circle at 40 on the x axis
        .attr('cy', 250)     // position the circle at 250 on the y axis
        .transition()        // apply a transition
        .duration(2000)      // apply it over 2000 milliseconds
        .attr('cx', 920)     // move the circle to 920 on the x axis
        .transition()        // apply a transition
        .duration(2000)      // apply it over 2000 milliseconds
        .attr('cx', 40)      // return the circle to 40 on the x axis
        .on("end", function(i) {
                while(i < 10) {
                    repeat;
                    i++;
                }
            });        
    };

};

circleTransition();

</script>
</body>

我的循环“while”不起作用。谢谢你的帮助。

Answer 1

首先，由于您正在调用该函数，因此它应该是repeat()，而不是repeat。此外，由于i是在函数repeat之外定义的，因此回调应该只是：

.on("end", function() {

......不是：

.on("end", function(i) {

因为此处i为undefined。

但这不是真正的问题。这里最大的问题是它是一个复杂的暂停或延迟JavaScript循环：while循环将立即运行到最后，在几毫秒内，一次调用repeat十次。

而不是那样，你可以这样做：

.on("end", function() {
    if (i > 9) return;
    i++;
    repeat();
});

或者，保存1行：

.on("end", function() {
    if (++i > 9) return;
    repeat();
});

以下是演示：

＆＃13;

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 100);

function circleTransition() {
  var timeCircle = svg.append("circle")
    .attr("fill", "steelblue")
    .attr("r", 20);
  repeat();

  var i = 0

  function repeat() {
    timeCircle
      .attr('cx', 40) // position the circle at 40 on the x axis
      .attr('cy', 50) // position the circle at 250 on the y axis
      .transition() // apply a transition
      .duration(2000) // apply it over 2000 milliseconds
      .attr('cx', 520) // move the circle to 920 on the x axis
      .transition() // apply a transition
      .duration(2000) // apply it over 2000 milliseconds
      .attr('cx', 40) // return the circle to 40 on the x axis
      .on("end", function() {
        if (++i > 9) return;
        repeat();
      });
  };

};

circleTransition();

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

仅重复动画给定次数

1 个答案: