title: Remove event listener with d3js not working
body: <p>I have an SVG structure where there are some shapes inside. I want to fire an event when a shape is clicked and another one when is clicked over the SVG. The problem is the SVG event is always fired.</p>
  
  <p>In order to prevent this I'm disabling event bubbling from the shape. Also I've tried to disable the event with d3 but seems to not work. Also tried to disable event with the native Javascript code.</p>
  
  <p>An example of the super simple code is:</p>
  
  <p><strong>SVG structure</strong></p>
  
  <pre><code>&lt;svg id="canvas" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
      &lt;g&gt;
          &lt;circle class="shape" r="10" cx="10" cy="10"&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Javascript code</strong></p>
  
  <pre><code>d3.select('#canvas').on('click',svgClickEvents);
  
  d3.selectAll('.item')
      .on("mouseover",mouseoverItem)
      .on('mouseleave',mouseleaveItem);
  
  //click
  d3.selectAll('.item',function(){
  
      //when an item is clicked, svgClickEvents must not be fired   
      d3.select('#canvas').on('click',null);  //this should remove the event listener
      //also tried with getElementById('canvas').removeEventListener('click',clickEvents,false);
  
  d3.select(this)
          .on("click",function() {
              d3.event.stopPropagation(); 
              console.log("click circle")
          });
  });
  </code></pre>
  
  <p>I know event is not being disabled because I'm getting the <code>onsole.log()</code> text alert from clickEvents function.</p>