Mostra i dati sul passaggio del mouse sulla cerchia

Ho un set di dati che sto tramando in una dispersione. Quando topo il mouse su una delle cerchie mi piacerebbe che fosse popup con i dati (come x, y valori, forse più). Ecco cosa ho provato ad usare:

vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(dx);}) .attr("cy", function(d) {return y(dy)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function() { d3.select(this).enter().append("text") .text(function(d) {return dx;}) .attr("x", function(d) {return x(dx);}) .attr("y", function (d) {return y(dy);}); }); 

Sospetto di dover essere più informativo su quali dati inserire?

Suppongo che quello che vuoi sia un suggerimento. Il modo più semplice per farlo è quello di aggiungere un elemento svg:title a ogni cerchio, poiché il browser si occuperà di mostrare il suggerimento e non è necessario il mousehandler. Il codice sarebbe qualcosa di simile

 vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") ... .append("svg:title") .text(function(d) { return dx; }); 

Ad esempio, se vuoi dei tooltip fantasiosi, potresti usare tipsy. Vedi qui per un esempio.

Un ottimo modo per fare una descrizione è qui: semplice esempio di tooltip D3

Devi aggiungere un div

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

Quindi puoi semplicemente cambiarlo usando

 .on("mouseover", function(){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");}); 

d3.event.pageX / d3.event.pageY è la coordinata del mouse corrente.

Se vuoi cambiare il testo puoi usare tooltip.text("my tooltip text");

Esempio di lavoro

C’è una fantastica libreria per fare ciò che ho scoperto di recente. È semplice da usare e il risultato è abbastanza accurato: d3-tip.

Puoi vedere un esempio qui :

inserisci la descrizione dell'immagine qui

Fondamentalmente, tutto ciò che devi fare è scaricare ( index.js ), includere lo script:

  

e quindi seguire le istruzioni da qui (stesso link come esempio)

Ma per il tuo codice, sarebbe qualcosa di simile:

definire il metodo:

 var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "Frequency: " + d.frequency + ""; }) 

crea il tuo svg (come fai già)

 var svg = ... 

chiama il metodo:

 svg.call(tip); 

aggiungi un suggerimento al tuo object:

 vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") ... .on('mouseover', tip.show) .on('mouseout', tip.hide) 

Non dimenticare di aggiungere il CSS:

  

Puoi passare i dati da utilizzare nel passaggio del mouse come questo: l’evento mouseover usa una funzione con i tuoi dati precedentemente enter come argomento (e l’indice come secondo argomento) in modo da non dover usare enter() una seconda volta.

 vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(dx);}) .attr("cy", function(d) {return y(dy)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function(d,i) { d3.select(this).append("text") .text( dx) .attr("x", x(dx)) .attr("y", y(dy)); }); 

Questo esempio sintetico dimostra in modo comune come creare suggerimenti personalizzati in d3.

 var w = 500; var h = 150; var dataset = [5, 10, 15, 20, 25]; // firstly we create div element that we can use as // tooltip container, it have absolute position and // visibility: hidden by default var tooltip = d3.select("body") .append("div") .attr('class', 'tooltip'); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // here we add some circles on the page var circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); circles.attr("cx", function(d, i) { return (i * 50) + 25; }) .attr("cy", h / 2) .attr("r", function(d) { return d; }) // we define "mouseover" handler, here we change tooltip // visibility to "visible" and add appropriate test .on("mouseover", function(d) { return tooltip.style("visibility", "visible").text('radius = ' + d); }) // we move tooltip during of "mousemove" .on("mousemove", function() { return tooltip.style("top", (event.pageY - 30) + "px") .style("left", event.pageX + "px"); }) // we hide our tooltip on "mouseout" .on("mouseout", function() { return tooltip.style("visibility", "hidden"); }); 
 .tooltip { position: absolute; z-index: 10; visibility: hidden; background-color: lightblue; text-align: center; padding: 4px; border-radius: 4px; font-weight: bold; color: orange; }