D3.js - Changing Opacity Of Element On Mouseover If Condition=false

I am making an interactive D3.js chart with filters that display points when the user clicks the selected checkbox. Additionally, on a mouseover event a popup will appear next to t

Solution 1:

You can get the current value of the opacity attribute by running d3.select(this).style("opacity"), so to check it in your mouseover handler you would do

.on("mouseover", function(d) {
        if(d3.select(this).style("opacity") != 0){
            div.transition()        
                .duration(200)      
                .style("opacity", .8);      
            div .html(d.datetime.substring(0,10) )  
                .style("left", (d3.event.pageX + 5) + "px")     
                .style("top", (d3.event.pageY - 24) + "px");    
            }
        })