將'onclick'事件附加到D3圖表背景

Question

我有一個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對象，但我不知道正確的方法。

Answer 1

事件實際上沒有被覆蓋，但兩者都被觸發 - SVG和條形碼的onclick處理程序。 要防止這種情況，請使用.stopPropagation()方法（請參閱文檔 ）。 代碼如下所示：

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

在這里完成示例。 與此處停止事件傳播的行為進行比較。

Answer 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 */ }, 
        });