D3从选择中的一个元素中删除点击事件

Question

I have a class in D3 say: selectors and I need to remove the click event from the selection

d3.selectAll('.selectors').on('click',function(){
       //Remove the currently clicked element from the selection.
});

Ive got two problems:

1. The removed element is supposed to be moved to a different part of the page and the I need the click event on it to be removed.

2. Also, would it be possible to reinsert the removed element into the selection on doing something else, like clicking on the removed element again?

Edit:

Found a solution for problem 1

d3.selectAll('.selectors').on('click',function(){
           //Remove the currently clicked element from the selection.
           d3.select(this).on('click',null);
    });

Is this the right way? Or is there a more graceful method?

A Demo Fiddle

Answer 1

here is the updated jquery it will work for your case

$(document).ready(function(){
$(document).on('click','.selectors',function(e){
 //$(document).off( 'click','.selectors');
  if(e.target.onclick==null)
  {
      e.target.onclick=
          function(){
          void(0);
      };
     alert('test');
     console.log('Hello');
  }
});
});

Answer 2

For problem 1, the best method(as far as I know) is to redefine the click event in D3 itself:

d3.selectAll('.selectors').on('click',function(){
           //Remove the currently clicked element from the selection.
           d3.select(this).on('click',null);
    });

For problem 2, however, once you turn a click event callback to null, the only way is to redefine the click event again, perhaps recursively:

function clickDefine() {
    d3.selectAll('.selectors').on('click', function () {
        //Remove the currently clicked element from the selection.
        console.log('Hello')
        d3.select(this).on('click', null);
        setTimeout(function(){clickDefine();},1000)
    });
}

This function makes the click event inactive for 1 second on click. And reactivates this again. I'm hoping this is an effective solution.