web-dev-qa-db-ja.com

d3.jsセレクターを使用してハンドラーを削除する方法

更新中のd3セレクターを使用して、誤って同じイベントハンドラーをsvg要素の上にオーバーレイしていました。

_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()は、同じハンドラーを再度追加していました。だから私は試しました

_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を使用して、

javascriptjquerysvgd3.js
25
HeyWatchThis

.off()はd3 v2.9.1ではサポートされていませんが、代替案は.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 
    });
}

参照：

https://github.com/d3/d3-selection#selection_on

33
HeyWatchThis