d3으로 드래그하는 동안 mouseover 및 mouseout 이벤트를 비활성화하는 방법은 무엇입니까?

Question

나는 풍선 도움말에 툴팁을 표시하고 캔버스 주위로 드래그 할 수있는 svg 동그라미가 있습니다. mouseover 및 mouseout 및 dragstart 및 dragend에 대해서는 이벤트를 기록해야 할 시점입니다.

그러나 원이 드래그 될 때 mouseover 이벤트가 계속 기록되도록하지 않으십시오. 이상적으로 툴팁을 계속 표시하고 싶지만 마우스 오버에 대한 로그를 생성하지 마십시오. 이벤트도 드래그되고있는 경우.

mouseover 이벤트를 비활성화하고 $(this).on('mouseover', function() { return false; }); 및 $(this).on('mouseover', mouseover);을 비롯하여 dragstart 및 dragend에서 다시 활성화하고 mouseover 이벤트를 바인딩 해제하고 다시 바인딩하려고 시도한 몇 가지 사항을 시도했습니다. 코드는 다음과 같습니다.

// define drag behavior 
drag = d3.behavior.drag() 
    .origin(function(d) { return {x: d['x'], y: d['y']}; }) 
    .on('dragstart', function(d) { 
     dragStart = new Date(); 
    }).on('drag', dragged) 
    .on('dragend', function(d) { 
     dragEnd = new Date(); 
     // units are seconds 
     var elapsedTime = (dragEnd - dragStart)/1000; 
     console.log("elapsed drag time: " + elapsedTime); 
     // TODO: generate the log of the drag --- 
    }); 

// create circles 
var circles = svg 
    .selectAll('circle') 
    .data(data) 
    .enter().append('circle') 
    .attr('class', 'circle') 
    .attr('cx', function(d) { return d['x']; }) 
    .attr('cy', function(d) { return d['y']; }) 
    .attr('r', radius) 
    .classed('unsorted', true) 
    .call(drag) 
    .on('click', clicked) 
    .on('mouseover', mouseover) 
    .on('mouseout', mouseout); 

// define mouseover behavior 
function mouseover(d) { 
    mouseoverStart = new Date(); 
    tip.show(d); 
} 

// define mouseout behavior 
function mouseout(d) { 
    tip.hide(d); 
    mouseoverEnd = new Date(); 
    // units are seconds 
    var elapsedTime = (mouseoverEnd - mouseoverStart)/1000; 
    console.log("elapsed mouseover time: " + elapsedTime); 
    // TODO: generate the log of the mouseover -- 
} 

어떻게하면이 아이디어를 얻을 수 있습니까? 해당 요소가 끌리고 있는지 확인할 수있는 mouseover 함수 내에있는 방법이 있습니까?

Answer 1

그냥 외부 범위에서 변수로 드래그 플래그 :

var isDragging = false; 
drag = d3.behavior.drag() 
    .origin(function(d) { return {x: d['x'], y: d['y']}; }) 
    .on('dragstart', function(d) { 
     isDragging = true; 
     dragStart = new Date(); 
    }).on('drag', dragged) 
    .on('dragend', function(d) { 
     dragEnd = new Date(); 
     // units are seconds 
     var elapsedTime = (dragEnd - dragStart)/1000; 
     console.log("elapsed drag time: " + elapsedTime); 
     // TODO: generate the log of the drag --- 
     isDragging = false; 
    }); 

function mouseout(d) { 
    tip.hide(d); 
    mouseoverEnd = new Date(); 
    // units are seconds 
    var elapsedTime = (mouseoverEnd - mouseoverStart)/1000; 
    if (!isDragging) console.log("elapsed mouseover time: " + elapsedTime); 
    // TODO: generate the log of the mouseover -- 
}