如何在d3.js中的鼠标悬停时在悬停时获取关闭icon(X) [英] How get close icon(X) on hover on mouseover in d3.js

问题描述

我有一个d3js饼图，其中显示了悬停数据.如何在鼠标悬停时获取关闭图标以关闭该悬停.我尝试使用CSS来获取它，但是无法正常工作.

I have a d3js pie chart which shows hover data. How to get a close icon on hover on the mouse to close that hover. I tried css to get it but not working.

    paths.on("mouseover", function(d){
        d3.select("#" + _this.tooltipId)
        .style("left", (d3.event.clientX + window.scrollX) + "px")
        .style("top", (d3.event.clientY + window.scrollY) + "px")
            .select("#value")
            .html(_this.config.tooltip(d.data, _this.config.label));
        d3.select("#" + _this.tooltipId).classed("crd3Hidden", false);
        var endAngle = d.endAngle + 0.05;
        var startAngle = d.startAngle - 0.05;
        var arcOver = d3.svg.arc().innerRadius(innerRadius)
        .outerRadius(outerRadius + 1).endAngle(endAngle).startAngle(startAngle);
        this.parentNode.parentNode.appendChild(this.parentNode);//the path group is on the top with in its parent group
        this.parentNode.parentNode.parentNode.appendChild(this.parentNode.parentNode);
        d3.select(this)
          .style("stroke", "black")//#5eecfd
          .style("opacity", 10)
          .attr("d", arcOver)
          .style("stroke-width", "4px");

推荐答案

创建工具提示的最简单方法是附加标题元素.标题元素将具有工具提示的校准行为.可以在不使用"mouseover"的情况下完成此操作.

The most easy way to create tooltips is by appending a title element. The title element will have the calssical behavior of a tooltip. This could be done without the usage of "mouseover".

paths.append('title').text('');

如果您要坚持自己的解决方案，则可以还原鼠标悬停"使用"mouseleave"事件的事件.事件.

If you want to stick to your own solution you can revert the "mouseover" event with the usage of the "mouseleave" event.

   paths.on("mouseleave", function(d){
     d3.select("#" + _this.tooltipId).remove();
    })

附录回答您的评论.好吧，你可以尝试这样的事情.但是我不能保证您会用到它，也没有副作用.

Addendum to answer your comment. Well, you could try something like this. But i cannot gurantee you that it will work or have no sideeffects.

      paths.on("mouseleave", function(d){
         setTimeout(() => {
           d3.select("#" + _this.tooltipId).remove();
          })
        },10000); // 10000ms => 10 seconds
});

另一种方法是为此使用动画:

Another way would be to use an animation for that:

paths.on("mouseleave", function(d){
             d3.select("#" + _this.tooltipId)
.remove()
.transition()
.duration(10000);    
});

这篇关于如何在d3.js中的鼠标悬停时在悬停时获取关闭icon(X)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！