Attaching 'onclick' event to D3 chart background

Question

I have a D3 histogram chart, onto which I have attached an \'onclick\' event to the bars:

...
var bar = svg.selectAll(\".bar\")
        .data(data)
        .ente         


        

Answer 1

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.