D3.js selection.interrupt() 函数

selection.interrupt() 是 D3.js 的一个函数，它可以用来停止正在进行的 Transition 或 Animation 动画效果。当需要在动画过程中进行一些其他操作或切换到其他界面时，可以用 interrupt() 函数来中断当前的动画效果。

使用方法

selection.interrupt() 可以用在任何正在进行动画的元素上，比如：

d3.select("circle")
  .transition()
  .duration(1000)
  .attr("r", 50);

在上面的代码中，我们对一个圆形进行了一次 1 秒钟的半径变化的动画。如果需要在动画进行的过程中中断这个动画，可以调用 interrupt() 函数：

d3.select("circle").interrupt();

调用上面的代码后，动画效果就会立即停止，圆形的半径会停留在中断时的状态。

你也可以在 transition 函数中设置一个回调函数，它会在动画结束时自动执行。在这个回调函数中，可以进行其他操作，比如切换到其他页面：

d3.select("circle")
  .transition()
  .duration(1000)
  .attr("r", 50)
  .on("end", function() {
    // 动画结束后切换到其他页面
  });

在上面的代码中，我们在动画结束后会执行一个回调函数。如果需要在回调函数执行前中断动画效果，可以在回调函数中先调用 interrupt() 函数：

d3.select("circle")
  .transition()
  .duration(1000)
  .attr("r", 50)
  .on("end", function() {
    d3.select("circle").interrupt();
    // 动画结束后立即中断动画效果，不再执行下一步操作
  });

参数说明

selection.interrupt() 函数没有任何参数。

注意事项

• interrupt() 函数只能停止正在进行的动画效果，不能停止还未开始的动画效果。
• interrupt() 函数只能停止基于 transition() 函数创建的动画效果，不能停止基于 ease()、delay()、duration() 等函数创建的动画效果。

参考文献

• D3.js API Reference