как автоматически удалить наведение через некоторое время в d3js - PullRequest
0 голосов
/ 14 июля 2020

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

всякий раз, когда я беру указатель мыши за пределы этого раздела, наведение все еще там, пока я не обновлю sh страницу. Я использовал функцию mouseout, но при этом, когда я вынимаю указатель наружу, он немедленно удаляет данные при наведении.

Я хочу, чтобы данные при наведении были удалены после определенного c времени, например 10 секунд, автоматически. Как этого добиться? Ниже приведен мой код, который я использовал для наведения и наведения указателя мыши.

В коде под 1-й строкой при выводе мыши:

"d3.select (" # "+ _this.tooltipId) .classed (" crd3Hidden " , правда);" Если я напишу true, то данные зависания будут там, пока я не обновлю sh. Для false он не будет отображать данные наведения, если указатель находится за пределами p ie section

    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 + 0.8).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");
    })
    paths.on("mouseout", function(d){
        d3.select("#" + _this.tooltipId).classed("crd3Hidden", true);        
        var endAngle = d.endAngle;
        var startAngle = d.startAngle;
        var arc1 = d3.svg.arc().innerRadius(innerRadius)
        .outerRadius(outerRadius).endAngle(endAngle).startAngle(startAngle);
        d3.select(this)
          .style("stroke", "#145A32")
          .style("opacity", 1)
          .attr("d", arc1)
          .style("stroke-width", "2px");
    });

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...