如何在使用 d3 拖动时禁用 mouseover 和 mouseout 事件？

Question

我有一堆 svg 圆圈，它们在悬停时显示工具提示，并且可以在 canvas 周围拖动。对于 mouseover 和 mouseout 以及 dragstart 和 dragend，我正在计时要记录的事件。

但是，当拖动圆圈时，我不希望它继续触发要记录的鼠标悬停事件 -- 理想情况下，我希望工具提示继续显示，但不生成日志mouseover 事件，如果它也被拖动。

我尝试了几种方法来尝试禁用鼠标悬停事件并在 dragstart 和 dragend 上重新启用它，包括 $(this).on('mouseover', function() { return false; }); 和 $(this).on('mouseover', 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 --
}

如何在使用 d3 拖动时禁用 mouseover 和 mouseout 事件？

How to disable mouseover and mouseout event while dragging with d3?

javascript

d3.js

mouseover

drag