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