Mostrar dados no mouseover do círculo

Eu tenho um dataset que estou plotando em um dispersão. Quando eu passar o mouse sobre um dos círculos, eu gostaria que ele fosse exibido com dados (como valores x, y, talvez mais). Aqui está o que eu tentei 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);}); }); 

Eu suspeito que preciso ser mais informativo sobre quais dados entrar?

Eu suponho que o que você quer é uma dica de ferramenta. A maneira mais fácil de fazer isso é acrescentar um elemento svg:title a cada círculo, pois o navegador cuidará de mostrar a dica de ferramenta e você não precisará do mousehandler. O código seria algo como

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

Se você quiser dicas mais sofisticadas, você pode usar bêbado, por exemplo. Veja aqui um exemplo.

Uma maneira realmente boa de criar uma dica de ferramenta é descrita aqui: Exemplo simples de dica de ferramenta D3

Você tem que acrescentar um div

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

Então você pode apenas alterná-lo 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 é a coordenada atual do mouse.

Se você quiser alterar o texto, use tooltip.text("my tooltip text");

Exemplo de trabalho

Existe uma biblioteca incrível para fazer isso que eu descobri recentemente. É simples de usar e o resultado é bem legal: d3-tip.

Você pode ver um exemplo aqui :

insira a descrição da imagem aqui

Basicamente, tudo que você precisa fazer é baixar ( index.js ), include o script:

  

e siga as instruções daqui (mesmo link como exemplo)

Mas para o seu código, seria algo como:

defina o método:

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

crie seu svg (como você já faz)

 var svg = ... 

chame o método:

 svg.call(tip); 

adicione uma dica ao seu object:

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

Não esqueça de adicionar o CSS:

  

Você pode passar os dados a serem usados ​​no mouse como este – o evento mouseover usa uma function com seus dados inseridos anteriormente como um argumento (e o índice como um segundo argumento) para que você não precise usar enter() uma 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 exemplo conciso demonstra como criar uma dica de ferramenta personalizada no 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; }