Collegamento 'onclick' evento a D3 sfondo grafico

Question

Ho un istogramma D3, su cui ho allegato un 'onclick' evento alle barre:

... 
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 }); 
... 

Questo funziona esattamente come previsto. Vorrei anche allegare un evento 'onclick' allo sfondo del grafico (cioè ovunque nel grafico che non è una barra), ma ho problemi con questo. Ho provato allegando l'evento in un paio di modi, ma in ogni caso, questo nuovo evento sembra ignorare il mio bar-click:

Alcuni tentativi:

$("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 } 
     }; 

Io parto dal presupposto che c'è un modo per aggiungere il gestore di eventi all'oggetto SVG quando viene inizializzato, ma non conosco il modo corretto per farlo.

Answer 1

L'evento non è in realtà sovrascritto, ma entrambi sono attivati: il gestore onclick per SVG e per la barra. Per evitare ciò, utilizzare il metodo .stopPropagation() (vedere the documentation). Il codice è simile al seguente:

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

Complete esempio here. Confrontate con il comportamento con l'interruzione della propagazione dell'evento here.

Answer 2

In questo esempio (riga 246: http://tributary.io/inlet/8361294) Appendo un nuovo retto con larghezza & all'altezza dell'area del grafico totale, quindi allega gli eventi del mouse (o clic).

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