ホバーでツールチップが消えることのないようにする方法

Question

私は多くのポイントを持つ折れ線グラフを実装しています。ツールチップが表示されます+私は、私はすぐにマウスを移動すると気が散ることができ、マウスを移動するたびに消え、この実装では

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

：私は現在で構成ホバー/ツールチップを持っています。マウスがプロット領域の上に浮かんでいる間、ツールチップが決してが消えないようにする方法はありますか？

特に、カーソルがポイントAにある場合は、ポイントAのツールチップを表示したいと思います。カーソルをポイントBに移動すると、ポイントBの途中になるまでポイントAのツールチップが表示されるようになります。そのポイントでポイント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) + ")");   
    }