D3.js - 更改鼠标悬停时元素的不透明度 IF 条件 = false

我正在制作一个带有过滤器的交互式 D3.js 图表，当用户单击选定的复选框时，该过滤器会显示点。此外，在鼠标悬停事件上，所选点旁边将出现一个弹出窗口，其中包含一些信息。

由于图表上的点数量相对较多，因此我选择在取消选中相应复选框时使相关点变得透明，而不是删除点并重新绘制它们（这在较慢的机器上会有点滞后）。

我目前拥有的代码可以工作。显示工具提示的代码也有效。然而，它们不能很好地协同工作。

当取消选择数据点时，用户看不到它，但由于它仍然存在，浏览器仍然会在鼠标悬停时显示取消选择的点的工具提示。因此，当用户将鼠标移动到当前透明点上时，我遇到了出现“幻影”工具提示的问题。

我试图将使工具提示出现在if语句如下所示，但这不起作用。不确定我的语法是否错误或者此行为是否不正确。

这是大部分有效的原始代码。出现工具提示，右侧数据点变为透明，但工具提示出现在透明点上方。

    svg.selectAll("path")
        .data(dataSet)
        .enter().append("path")
        .attr("class", "dot")
       //other stuff goes here

        //code to make tooltip appear on mouseover
        .on("mouseover", function(d) {
            if(d.style("opacity", 0)=false){
                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");    
                }
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        })

    //code for tooltip itself
    var div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);   
    });     


 //code to make de-selected points transparent
    d3.selectAll("[name=cat1]").on("change", function() {
        var selected = this.value;
        display = this.checked ? "inline" : "none";
    svg.selectAll(".dot")
        .filter(function(d) {return selected == d.rainSnowStatus;})
        .attr("display", display);
        }); 

这就是我试图做的（在鼠标悬停函数中放置一个 if 语句，以便它仅在数据点不透明时激活），但它不起作用（工具提示无法完全显示）。

      //tooltip code within an if statement; does not work
        .on("mouseover", function(d) {
            if(svg.dot.style("opacity", 0)==false){      //  << IS THIS RIGHT?
                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");    
                }
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        })

任何帮助表示赞赏。谢谢！

您可以获取当前值opacity通过运行属性d3.select(this).style("opacity")，所以要检查它在你的mouseover你会做的处理程序

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