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

Question

我正在制作一个带有过滤器的交互式 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);   
        })

感谢任何帮助。谢谢!

Answer 1

您可以通过运行 d3.select(this).style("opacity") 获取 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");    
            }
        })