一時停止を解除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

まず、関数の開始グローブを作ります。上記の宣言ドラッグ終了コールstartGlobe機能で

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

。あなたはそれをクリックしたときに

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

コードhere