将“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 对象初始化时将事件处理程序添加到它，但我不知道正确的方法。

该事件实际上并未被覆盖，但两者都被触发了——onclickSVG 和栏的处理程序。为了防止这种情况，请使用.stopPropagation()方法（参见文档 https://github.com/mbostock/d3/wiki/Selections#d3_event）。代码如下所示：

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

完整示例here http://jsfiddle.net/V7mC4/。与停止事件传播的行为进行比较here http://jsfiddle.net/V7mC4/1/.