Mostrar datos sobre el mouseover del círculo

Tengo un conjunto de datos que estoy trazando de forma dispersa. Cuando toco uno de los círculos, me gustaría que aparezca con datos (como valores x, y, tal vez más). Esto es lo que intenté usar:

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);}); }); 

Sospecho que necesito ser más informativo sobre qué datos ingresar?

Supongo que lo que quieres es una información sobre herramientas. La forma más sencilla de hacerlo es agregar un elemento svg:title a cada círculo, ya que el navegador se encargará de mostrar la información sobre herramientas y no necesitará el manejador de mouse. El código sería algo así como

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

Si quieres información sobre herramientas más elegante, podrías utilizar tipsy por ejemplo. Vea aquí para un ejemplo.

Una forma realmente buena de hacer una sugerencia de herramienta se describe aquí: Ejemplo simple de ayuda sobre herramientas D3

Tienes que agregar un div

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

Entonces solo puedes alternar 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 es la coordenada actual del mouse.

Si desea cambiar el texto, puede usar tooltip.text("my tooltip text");

Ejemplo de trabajo

Hay una biblioteca increíble para hacer eso que descubrí recientemente. Es simple de usar y el resultado es bastante limpio: d3-tip.

Puedes ver un ejemplo aquí :

enter image description here

Básicamente, todo lo que tienes que hacer es descargar ( index.js ), incluir el script:

  

y luego siga las instrucciones desde aquí (mismo enlace como ejemplo)

Pero para su código, sería algo así como:

define el método:

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

crea tu svg (como ya lo haces)

 var svg = ... 

llamar al método:

 svg.call(tip); 

agrega consejo a tu objeto:

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

No olvides agregar el CSS:

  

Puede pasar los datos que se utilizarán en el mouseover de esta manera: el evento mouseover usa una función con sus datos ingresados ​​previamente como argumento (y el índice como segundo argumento) para que no necesite usar enter() por segunda vez.

 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)); }); 

Este ejemplo conciso muestra una forma común de cómo crear información sobre herramientas personalizada en 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; }