D3 click事件

Question

我有兩個SVG網頁通過D3.js.插入我可以將點擊事件添加到svg，直到我已經直接附加到主體。但是我有第一SVG，我在那裏追加另一SVG在另一個上面「飄」的div。嘗試添加點擊事件時，它們不會觸發。

我也曾嘗試跟蹤鼠標的位置，但是這只是在附加到身體的SVG工作了。

有沒有一種辦法能夠分配點擊聽衆的rect，是「浮動」的div內？

我這裏有小提琴：JsFiddle

我想，從黑顏色更改爲白色，反之亦然，在頁面頂部的一個rect點擊時。這怎麼可能？

我也曾嘗試jQuery的方法..

請注意，如果您移動鼠標在第二SVG，你實際上可以DRAP和放大中的第一個，這是不受歡迎的行爲，太。

Answer 1

這裏是一個更新的工作JsFiddle使用類來回切換實現預期的效果。 JS的相關部分是在這裏：

d3.selectAll(".controlBarButton") 
    .classed("white",function(d,i){return rule[i] === "none"}) 
    .on("click",function(){ 
     d3.select(this).classed("white",!d3.select(this).classed("white")); 
    }); 

我也註釋掉前面的樣式設置到白68和79我添加CSS規則根據切換white類設置黑白填充和去除pointer-events: none CSS行規則阻止控制欄上的所有鼠標事件。