将“onclick”事件附加到D3图表背景

我有一个D3直方图图表，我在其上附加了一个“onclick”事件：

... var bar = svg.selectAll(".bar") .data(data) .enter().append("g") .attr("class", "bar") .attr("transform", function(d) { return "translate(" + x(dx) + "," + y(dy) + ")"; }) .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和bar的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 */ }, });