javascript - 取消暂停 d3.timer

Question

我真的是 d3 的新手，所以也许这个问题太愚蠢了，但是......我想创建一个地球仪，它可以自己和用户旋转。当用户旋转地球时，它会暂停自己的旋转，然后再继续旋转。

我尝试使用鼠标事件，但没有成功。所以，我有这样的事情:

timer = d3.timer(function() {
var dt = Date.now() - time;
projection.rotate([rotate[0] + velocity[0] * dt, 0]);
feature.attr("d", path);
});

//Drag
var drag = d3.drag().subject(function() {
    var r = projection.rotate();
    return {
  x: λ.invert(r[0]),
  y: φ.invert(r[1])
};


 }).on("drag", function() {
stopGlobe();
projection.rotate([λ(d3.event.x), φ(d3.event.y)]);
feature.attr("d", path);
});   

svg.call(drag);

另外，我听说过 .off，但不明白，我如何在那里使用它。我在 codepen 上有这个地球仪 -> https://codepen.io/bramsis/pen/QOPXej

你能帮我解决这个问题吗？

Answer 1

先做一个函数start globe；

function startGlobe() {
      var r = projection.rotate()[0];//old state
      var k = projection.rotate()[1];//old state
      time = Date.now();
      timer.restart(function() {
        var dt = Date.now() - time;
        projection.rotate([r + velocity[0] * dt, k]);
        feature.attr("d", path);
      });
    }

在拖动结束时调用上面声明的 startGlobe 函数。

.on("end", function () { 
        startGlobe();
      });

工作代码here