title: d3.on("mouseover") event does not work with nested SVG elements
body: <p>I have a nested set of  elements (SVG). The root element is the graph, and the children are elements in the graph (lines, axis, etc.). Simplified example:</p>
  
  <pre><code>&lt;g transform="translate(80,10)" id="mainGraph"&gt;
      &lt;g class="Line"&gt;
          &lt;path d="....."&gt;&lt;/path&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>My problem is that if I bind a mouseover/mousemove event (with D3.on("mouseover") for example) to the mainGraph element, it only triggers if I move the mouse over one of the child elements.</p>
  
  <p>One of the things I read is that there is priority of later elements, so I added .style("pointer-events","none") to all child elements, but that didn't work.</p>