d3でドラッグしている間にマウスオーバーとマウスアウトイベントを無効にするにはどうすればよいですか？

Question

私は、ホバー上にツールチップを表示し、キャンバスの周りにドラッグすることができるsvgサークルの束を持っています。 mouseoverとmouseoutとdragstartとdragendについては、イベントを記録するタイミングです。

円がドラッグされているとき、マウスオーバーイベントが記録され続けるのを避けたい - 理想的には、ツールヒントを表示し続けたいが、マウスオーバーのログを生成しないイベントもドラッグされている場合

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

どのように私はこれを達成することができますか？その要素がドラッグされているかどうかを確認できる方法がありますか？

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