如何使用d3.js选择器删除处理程序 [英] How do you remove a handler using a d3.js selector

问题描述

我不小心使用我正在更新的d3选择器在svg元素上覆盖相同的事件处理程序。

I was accidentally overlaying the same event handler on top of svg elements using d3 selectors I was updating.

add_listeners = function() {
    d3.selectAll(".nodes").on("click", function() { 
        //Event handler to highlight clicked d3 element
    });

    jQuery('#some_navigation_button').on('click', function() { 
        //Event handler 
    });
    jQuery('#some_refresh_button').on('click', function() { 
        //Event handler that re-draws some d3 svg elements
    });

    //... 5 other navigation and d3 handlers
}

add_listeners（）重新添加了相同的处理程序。所以我尝试了

The add_listeners() was re-adding the same handlers. So I tried

add_listeners = function() {
    d3.selectAll(".nodes").off();
    jQuery('#some_navigation_button').off();
    jQuery('#some_refresh_button').off();

    d3.selectAll(".nodes").on("click", function() { 
        //Event handler 
    });
    jQuery('#some_navigation_button').on('click', function() { 
        //Event handler 
    });
    jQuery('#some_refresh_button').on('click', function() { 
        //Event handler that re-draws some d3 svg elements
    });

    //... 5 other navigation and d3 handlers
}

，没有运气。

注意：使用d3 v2.9.1，

Notes: using d3 v2.9.1 ,

推荐答案

d3 v2.9.1不支持 .off（），一个替代方法是
.on（'click'，null）

Found out that although .off() is not supported for d3 v2.9.1, an alternative is .on('click',null)

完全：

add_listeners = function() {
    // Remove handler before adding, to avoid superfluous handlers on elements.
    d3.selectAll(".nodes").on('click',null);

    d3.selectAll(".nodes").on("click", function() { 
        //Event handler 
    });
}

参考：

在此处找到此信息：

http：//objjob.phrogz .net / d3 / method / 1128

这篇关于如何使用d3.js选择器删除处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！