如何確保工具提示永遠不會消失懸停

Question

我正在實現一個有很多點的折線圖。我現在有懸停/提示與配置：

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

隨着該具體實施中會出現工具提示+每當我移動鼠標，它可以分散注意力，如果我快速移動鼠標消失。有沒有辦法確保工具提示從未消失而鼠標懸停在情節區域上？

具體來說，如果我的光標在A點上，我希望點A的工具提示可見。當我將光標移動到B點時，我希望A點的工具提示保持可見狀態，直到我到達B點的中途，此時我希望工具提示跳轉到B點。

什麼是實現這一目標的最佳方式？

Answer 1

當您進入繪圖區並顯示該點的工具提示時，您可能希望找到與鼠標最近的點。

我建議你閱讀this great post，這很好地解釋了你如何生成出色的工具提示。 上面的帖子並未顯示任何文字，但邏輯與你想要做的完全相同。關鍵的一段代碼是：

// 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) + ")");   
    }