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에 대해 들어,하지만 난 거기 사용할 수있는 방법을 이해하지 않습니다 그래서,이 같은 떨어지게 있습니다. 그리고 나는이 세계를 코덱에 가지고 있습니다 -> https://codepen.io/bramsis/pen/QOPXej

도와 주시겠습니까?

Answer 1

먼저 기능 시작 글로브를 만드십시오;

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