title: How do you remove a handler using a d3.js selector
body: <p>I was accidentally overlaying the same event handler on top of svg elements using d3 selectors I was updating.</p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>The <code>add_listeners()</code> was re-adding the same handlers. So I tried </p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>, with no luck. </p>
  
  <p>Notes: using d3 v2.9.1 , </p>