Как получить значок закрытия (X) при наведении курсора мыши в d3. js

Question

У меня есть диаграмма d3 js p ie, которая показывает данные при наведении. Как получить значок закрытия при наведении курсора мыши, чтобы закрыть это наведение. Я пробовал css получить его, но не работал.

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

Answer 1

Самый простой способ создать всплывающие подсказки - это добавить элемент заголовка. Элемент заголовка будет вести себя как всплывающая подсказка. Это можно сделать без использования mouseover.

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

Если вы хотите придерживаться своего собственного решения, вы можете отменить событие «mouseover» с помощью события «mouseleave».

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

Приложение для ответа на ваш комментарий. Что ж, вы можете попробовать что-то подобное. Но я не могу гарантировать вам, что это сработает или не будет иметь побочных эффектов.

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

Другой способ - использовать для этого анимацию:

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