D3 anywhere outside graph event listener

Question

Basically I have a graph where the user can click different SVG shapes and by doing so a .on('click') function will change the color fills. However, at some point it's going to be important to give the user the option to revert the graph to its initial state. I think the intuitive way to go about this for my case is by clicking anywhere outside the graph, ie somewhere on the document body that is not in the graph coordinate plane (margins, padding, ect).

I tried this:

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

It did not have any effect. I'm guessing that my existing on click effects of the shapes are overriding my d3.select('body').on('click') that I tried above. Either that or my approach is just flat out wrong.

Any suggestions here would be great.

Also I am aware that .attr('fill') and .style('fill') should almost always be consistent throughout, I do need .style('fill') here. I tried .attr('fill') just to be safe as well.

Answer 1

You might be able to use something like

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