D3 - Disable/Reenable mouseover on certain layers

Question

I'm completely new to both D3 and JavaScript, so I'm not even sure of the best way to go about searching for an answer to my problem. I am currently trying to adapt this Interactive Scatter Plot/Legend to my own data. I've gotten it working, but one issue I noticed – which turned out to be an issue in the original as well, though I hadn't noticed it at first – is that when layers are hidden, the mouseover tip still fires for invisible buttons.

Is there a way to adapt the code so that hidden layers aren't just invisible, but no longer trigger a mouseover event either, such that lower layers previously covered by an upper layer will be accessible by mouseover, once the upper layer has been hidden?

Answer 1

Doing the less possible amount of changes in that code, just set pointer-events to none before the filter and to all after the filter:

legend.on("click", function(type) {
    d3.selectAll(".dot")
        .style("opacity", 0.0)
        .attr("pointer-events", "none")
        .filter(function(d) {
            return d["first_careunit"] == type;
        })
        .style("opacity", 1)
        .attr("pointer-events", "all")
        .style("stroke", "black")
});

Of course, with a big refactor, there are best ways to do that.

Here is the updated bl.ocks: https://bl.ocks.org/GerardoFurtado/a2d323f9ef49e864ee589158b50cbaec/1d33bf045be6aeab83bb7c348354f1f10481f7b6

Not related to your question, but from a user's perspective it's annoying the fact that you can select a category but you cannot unselect it (that is, view all) after that.