score:67

Accepted answer

The event isn't actually overridden, but both are triggered -- the onclick handler for the SVG and for the bar. To prevent this, use the .stopPropagation() method (see the documentation). The code looks like this:

rect.on("click", function() {
  console.log("rect");
  d3.event.stopPropagation();
});

Complete example here. Compare with the behaviour with stopping the propagation of the event here.

score:1

In this example (line 246: http://tributary.io/inlet/8361294) I append a new rect with width & height equal to the total chart area, then attach my mouse (or click) events.

svg.append("rect")
        .attr({"class": "overlay" , "width": width , "height": height})
        .on({
          "mouseover": function() { /* do stuff */ },
          "mouseout":  function() { /* do stuff */ }, 
          "click":  function() { /* do stuff */ }, 
        });

Related Query

More Query from same tag