Блог

Я реализую линейную диаграмму с большим количеством точек. В настоящее время у меня настроено наведение / всплывающая подсказка с:

 hover: {
  mode: "x-axis"
},
tooltips: {
  mode: "x-axis"
}
 

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

В частности, если мой курсор находится в точке A, я бы хотел, чтобы всплывающая подсказка для точки A была видимой. Когда я перемещаю курсор в сторону точки B, я бы хотел, чтобы всплывающая подсказка для точки A оставалась видимой, пока я не окажусь на полпути к точке B, и в этот момент я бы хотел, чтобы всплывающая подсказка перескочила в точку B.

Каков наилучший способ добиться этого?

Возможно, вам захочется найти ближайшую точку к вашей мыши при входе в область построения и отобразить всплывающую подсказку этой точки.

Я предлагаю вам прочитать этот замечательный пост, в котором довольно хорошо объясняется, как вы можете создавать отличные всплывающие подсказки. В приведенном выше сообщении не отображается текст над точками, но логика точно такая же для того, что вы хотите сделать. Важнейший фрагмент кода:

 // append the rectangle to capture mouse               
    svg.append("rect")                                     
        .attr("width", width)                              
        .attr("height", height)                            
        .style("fill", "none")                             
        .style("pointer-events", "all")                    
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);                       

    function mousemove() {                                 
        var x0 = x.invert(d3.mouse(this)[0]),              
            i = bisectDate(data, x0, 1),                   
            d0 = data[i - 1],                              
            d1 = data[i],                                  
            d = x0 - d0.date > d1.date - x0 ? d1 : d0;

        //you may want to change that to select a text area rather than a circle - whatever object is your tooltip in your code
        focus.select("circle.y")                           
            .attr("transform",                             
                  "translate("   x(d.date)   ","           
                                 y(d.close)   ")");        
    }