Show data on mouseover of circle

d3.js, mouseover, tooltip

Solution

I assume that what you want is a tooltip. The easiest way to do this is to append an `svg:title` element to each circle, as the browser will take care of showing the tooltip and you don't need the mousehandler. The code would be something like

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

If you want fancier tooltips, you could use tipsy for example. See here for an example.

Problem

I have a set of data that I am plotting in a scatter. When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more). Here is what I tried using: ``` vis.selectAll("circle") .data(datafiltered).enter().append("svg:circle") .attr("cx", function(d) { return x(d.x);}) .attr("cy", function(d) {return y(d.y)}) .attr("fill", "red").attr("r", 15) .on("mouseover", function() { d3.select(this).enter().append("text") .text(function(d) {return d.x;}) .attr("x", function(d) {return x(d.x);}) .attr("y", function (d) {return y(d.y);}); }); ``` I suspect I need to be more informative about what data to enter?

Original source