D3 图形事件侦听器之外的任何位置

Question

>基本上我有一个图表，用户可以在其中单击不同的SVG形状，通过这样做，.on('click')函数将更改颜色填充。但是，在某些时候，为用户提供将图形还原到其初始状态的选项非常重要。我认为对于我的情况来说，解决这个问题的直观方法是单击图形外的任何地方，即文档正文上不在图形坐标平面中的某个地方(边距、填充等)。

我试过这个：

d3.select('body').on('click', function() {
d3.selectAll('circle').style('fill', function(d) {
return d.color;
})
});

它没有任何效果。我猜我现有的形状点击效果覆盖了我上面尝试的d3.select('body').on('click')。无论是这样还是我的方法都是完全错误的。

这里的任何建议都会很棒。

我也知道.attr('fill')和.style('fill')应该几乎总是一致的，我在这里确实需要.style('fill')。为了安全起见，我试着.attr('fill')。

Answer 1

你可以使用类似的东西

window.onclick = function(event){
if(!(event.target.className.baseVal=="circleClass")){
d3.selectAll('circle').style('fill', function(d) {
return d.color;
})
}
}