Hinzufügen des ‘onclick’-Ereignisses zum D3-Diagrammhintergrund

Ich habe ein D3-Histogrammdiagramm, auf dem ich ein ‘onclick’-Ereignis an die Balken angehängt habe:

...
var bar = svg.selectAll(".bar")
        .data(data)
        .enter().append("g")
        .attr("class", "bar")
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
        .on('click', function(d,i){ //do stuff  });
...

Das funktioniert genau wie erwartet. Ich würde auch gerne ein ‘onclick’-Ereignis an den Hintergrund des Diagramms anhängen (dh überall im Diagramm, das kein Balken ist), aber ich habe Probleme damit. Ich habe versucht, das Ereignis auf verschiedene Arten anzuhängen, aber in jedem Fall scheint dieses neue Ereignis meinen Balkenklick zu überschreiben:

Einige Versuche:

$("svg:not('.bar')").on("click", function(){ //do stuff });

$("g:not('.bar')").on("click", function(){ //do stuff });

var svg = d3.select("#histogram_block").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .on("click", function(d,i){
            if (d) { //do stuff}
            else { //do stuff }
        };

Ich gehe davon aus, dass es eine Möglichkeit gibt, den Event-Handler dem SVG-Objekt hinzuzufügen, wenn es initialisiert wird, aber ich weiß nicht, wie ich das richtig machen soll.

Das Ereignis wird nicht wirklich überschrieben, aber beide werden ausgelöst – die onclick Handler für das SVG und für die Leiste. Um dies zu verhindern, verwenden Sie die .stopPropagation() Methode (vgl die Dokumentation). Der Code sieht so aus:

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

Vollständiges Beispiel hier. Vergleichen Sie mit dem Verhalten beim Stoppen der Ausbreitung des Ereignisses hier.

In diesem Beispiel (Zeile 246: http://tributary.io/inlet/8361294) Ich hänge ein neues Rect an, dessen Breite und Höhe dem gesamten Diagrammbereich entsprechen, und hänge dann meine Maus- (oder Klick-) Ereignisse an.

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