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;
    })
}
    }

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

1 个答案: