So zeigen Sie den Tooltip im zoombaren Kreisdiagramm an

Question

Ich habe versucht, den Tooltip in der zoombaren Kreispackung anzuzeigen. Ich muss es onMouseover anzeigen, und ich kann die Warnung aber nicht im Tooltip-Format abrufen.

Kann mir jemand helfen, dieses zu erhalten ..

Dank.

Answer 1

Hier finden Sie die folgenden. Hoffe das hilft dir.

var data = [4, 8, 15, 16, 23, 42]; 

var x = d3.scale.linear() 
.domain([0, d3.max(data)]) 
.range([0, 420]); 

var tooltip = d3.select("body") 
.append("div") 
.style("position", "absolute") 
.style("z-index", "10") 
.style("visibility", "hidden") 
.style("background", "#000") 
.text("a simple tooltip"); 

d3.select("body") 
.selectAll("div") 
.data(data) 
.enter().append("div") 
.style("width", function(d) { return x(d) + "px"; }) 
.text(function(d) { return d; }) 
.on("mouseover", function(d){tooltip.text(d); return 
tooltip.style("visibility", "visible");}) 
    .on("mousemove", function(){return tooltip.style("top", (d3.event.pageY- 
10)+"px").style("left",(d3.event.pageX+10)+"px");}) 
    .on("mouseout", function(){return tooltip.style("visibility", 
"hidden");}); 

Der var Tooltip = Block ist, wo wir unsere Tooltip sind die Schaffung selbst, die nur ein div ist, die standardmäßig und positioniert „über“ alle Elemente auf der Seite (mit einem hohen z-index versteckt Wert).

Sobald dies erstellt wurde, haben wir dann den Balkendiagramm-Erstellungscode von d3.js mit einer Anzahl von .on-Methodenaufrufen hinzugefügt, die das entsprechende Ereignis und die auszuführende Funktion akzeptieren, wenn dieses Ereignis eintritt. Am wichtigsten ist die erste mouseover-Ereignisfunktion, in der wir tipptip.text (d) angeben, was bedeutet, dass der Text unseres Tooltips auf den übergebenen Datenwert von d gesetzt wird.

Hier erhalten Sie anpassbare div-Tooltips mit den von uns übergebenen Daten.