Question

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

因为图表上有相对较多的点，所以我选择在取消选中相应的复选框时使相关点透明，而不是删除点并重新绘制它们（稍微慢一点）机）。

我目前使用的代码有效。显示工具提示的代码也有效。但是，它们并不能很好地协同工作。

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

我试图附上使工具提示出现在public static void Main(string[] args) { //Create a list of lists of objects. var collections = new List<List<object>>(); collections.Add(new List<object> { 1, 5, 3 }); collections.Add(new List<object> { 7, 9 }); collections.Add(new List<object> { "a", "b" }); //Get all the possible permutations var combinations = GetPermutations(collections); //Loop through the results and display them in console foreach (var result in combinations) { result.ForEach(item => Console.Write(item + " ")); Console.WriteLine(); } Console.WriteLine("Press any key to exit."); Console.ReadKey(); } private static List<List<object>> GetPermutations(List<List<object>> collections) { List<List<object>> permutations = new List<List<object>>(); //Check if the input list has any data, else return the empty list. if (collections.Count <= 0) return permutations; //Add the values of the first set to the empty List<List<object>> //permutations list foreach (var value in collections[0]) permutations.Add(new List<object> { value }); /* Skip the first set of List<List<object>> collections as it was * already added to the permutations list, and loop through the * remaining sets. For each set, call the AppendValues function * to append each value in the set to the permuations list. * */ foreach (var set in collections.Skip(1)) permutations = AppendNewValues(permutations, set); return permutations; } private static List<List<object>> AppendNewValues(List<List<object>> permutations, List<object> set) { //Loop through the values in the set and append them to each of the //list of permutations calculated so far. var newCombinations = from additional in set from value in permutations select new List<object>(value) { additional }; return newCombinations.ToList(); }语句中的代码，如下所示，但这不起作用。不确定我的语法是否错误或此行为是否正确。

这是最常用的原始代码。出现工具提示，右侧数据点变为透明，但工具提示出现在透明点上。

if

这就是我尝试做的事情（在mouseover函数中放置一个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);
        });

感谢任何帮助。谢谢！

Answer 1

您可以通过运行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");    
            }
        })

D3.js - 在mouseover IF条件= false时更改元素的不透明度

1 个答案: