So stellen Sie sicher, dass Tooltips niemals beim Schweben verschwinden

Question

Ich implementiere ein Liniendiagramm mit vielen Punkten. Im Moment habe ich den Hover/Tooltip konfiguriert mit:

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

Mit dieser Implementierung der Tooltip erscheint + verschwindet, wenn ich die Maus bewegen, die als störend empfunden werden kann, wenn ich die Maus schnell bewegen. Gibt es eine Möglichkeit, um sicherzustellen, dass der Tooltip nie verschwindet, während die Maus über den Zeichenbereich verschoben ist?

Insbesondere, wenn mein Cursor auf Punkt A ist, möchte ich den Tooltip für Punkt A sichtbar sein. Wenn ich den Cursor zu Punkt B bewege, möchte ich, dass der Tooltip für Punkt A sichtbar bleibt, bis ich halb auf Punkt B stehe. An diesem Punkt möchte ich, dass der Tooltip zum Punkt B springt.

Was ist der beste Weg, dies zu erreichen?

Answer 1

Sie können den nächsten Punkt zu Ihrer Maus finden, wenn Sie den Diagrammbereich eingeben und den Tooltip dieses Punkts anzeigen.

Ich schlage vor, Sie lesen this great post, die ziemlich gut erklärt, wie Sie große Tooltips produzieren können. Der obige Beitrag zeigt keinen Text über die Punkte, aber die Logik ist genau die gleiche für was Sie tun möchten. Das entscheidende Stück Code ist:

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