So fügen Sie den Legendenelementen eines Diagramms in dimple.js eine QuickInfo hinzu

Question

Ich habe schon lange nach einer Möglichkeit gesucht, den Legendenelementen eines Diagramms in dimple.js einen Tooltip hinzuzufügen, jedoch ohne Erfolg.

Kennt jemand eine Möglichkeit, dies zu tun?

Answer 1

Es gibt keine integrierte Möglichkeit zum Erstellen einer QuickInfo für die Legende, aber nach dem Zeichnen können Sie alle Formen auswählen und für jede eine QuickInfo erstellen. Zum Beispiel:

 // code creating one tooltip 
div var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

// code that adds an event listener to each rectangle in your legend: 
myLegend.shapes.selectAll("rect") 
      .on("mouseover", function(d) {   
      div.transition()   
       .duration(200)  
       .style("opacity", .9);  
      div .html(formatTime(d.date) + "<br/>" + d.close) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  
       .style("opacity", 0); 
     }); 

Dimple Referenz für legend.shapes: legend.shapes

-Code im Beispiel ist vor allem von Mike Bostock Vorbild kopiert: simple d3 tooltips