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上有这个地球 - ＆gt; 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

取消暂停d3.timer

1 个答案: