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行规则阻止控制栏上的所有鼠标事件。