Присоединение события "onclick" к фону диаграммы D3

У меня есть гистограмма D3, на которую я привязал событие "onclick" к барам:

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

Это работает точно так, как ожидалось. Я также хотел бы добавить событие "onclick" на фоне диаграммы (т.е. Всюду в диаграмме, которая не является баром), но у меня возникают проблемы с этим. Я попытался связать событие несколькими способами, но в каждом случае это новое событие, похоже, отменяет мой штрих-код:

Некоторые попытки:

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

Я предполагаю, что есть способ добавить обработчик события к SVG-объекту, когда он инициализирован, но я не знаю, как правильно это сделать.

Ответ 1

Событие на самом деле не переопределено, но оба запускаются - обработчик onclick для SVG и для панели. Чтобы предотвратить это, используйте метод .stopPropagation() (см. документацию). Код выглядит следующим образом:

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

Заполните пример здесь. Сравните с поведением с остановкой распространения события здесь.

Ответ 2

В этом примере (строка 246: http://tributary.io/inlet/8361294) Я добавляю новый прямоугольник с шириной и высотой, равным общей площади диаграммы, затем прикрепите мои мыши (или нажмите) события.

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