Show data on mouseover of circle

Question

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

User · Answer

A really good way to make a tooltip is described here: Simple D3 tooltip example

You have to append a div

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

Then you can just toggle it using

.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 is the current mouse coordinate.

If you want to change the text you can use tooltip.text("my tooltip text");

Working Example

User · Answer

There is an awesome library  for doing that that I recently discovered  It s simple to use and the result is quite neat  d3-tip   You can see an example here     Basically  all you have to do is to download index js   include the script    lt script src  index js  gt  lt  script gt    and then follow the instructions from here   same link as example   But for your code  it would be something like   define the method   var tip   d3 tip      attr  class    d3-tip      offset  -10  0      html function d        return   lt strong gt Frequency  lt  strong gt   lt span style  color red  gt     d frequency     lt  span gt           create your svg  as you already do   var svg         call the method   svg call tip     add tip to your object   vis selectAll  circle       data datafiltered  enter   append  svg circle           on  mouseover   tip show      on  mouseout   tip hide    Don t forget to add the CSS    lt style gt   d3-tip     line-height  1    font-weight  bold    padding  12px    background  rgba 0  0  0  0 8     color   fff    border-radius  2px        Creates a small triangle extender for the tooltip     d3-tip after     box-sizing  border-box    display  inline    font-size  10px    width  100     line-height  1    color  rgba 0  0  0  0 8     content    25BC     position  absolute    text-align  center        Style northward tooltips differently     d3-tip n after     margin  -1px 0 0 0    top  100     left  0     lt  style gt

User · Answer

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

User · Answer

You can pass in the data to be used in the mouseover like this- the mouseover event uses a function with your previously entered data as an argument  and the index as a second argument  so you don t need to use enter   a second time   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 d i        d3 select this  append  text            text  d x           attr  x   x d x            attr  y   y d y

User · Answer

This concise example demonstrates common way how to create custom tooltip in d3    x000D   x000D  var w   500  x000D  var h   150  x000D   x000D  var dataset    5  10  15  20  25   x000D   x000D     firstly we create div element that we can use as x000D     tooltip container  it have absolute position and x000D     visibility  hidden by default x000D   x000D  var tooltip   d3 select  body   x000D     append  div   x000D     attr  class    tooltip    x000D   x000D  var svg   d3 select  body   x000D     append  svg   x000D     attr  width   w  x000D     attr  height   h   x000D   x000D     here we add some circles on the page x000D   x000D  var circles   svg selectAll  circle   x000D     data dataset  x000D     enter   x000D     append  circle    x000D   x000D  circles attr  cx   function d  i    x000D      return  i   50    25  x000D       x000D     attr  cy   h   2  x000D     attr  r   function d    x000D      return d  x000D       x000D     x000D       we define  mouseover  handler  here we change tooltip x000D       visibility to  visible  and add appropriate test x000D     x000D     on  mouseover   function d    x000D      return tooltip style  visibility    visible   text  radius       d   x000D       x000D     x000D       we move tooltip during of  mousemove  x000D     x000D     on  mousemove   function     x000D      return tooltip style  top    event pageY - 30     px   x000D         style  left   event pageX    px    x000D       x000D     x000D       we hide our tooltip on  mouseout  x000D     x000D     on  mouseout   function     x000D      return tooltip style  visibility    hidden    x000D        x000D   tooltip   x000D      position  absolute  x000D      z-index  10  x000D      visibility  hidden  x000D      background-color  lightblue  x000D      text-align  center  x000D      padding  4px  x000D      border-radius  4px  x000D      font-weight  bold  x000D      color  orange  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs d3 4 11 0 d3 min js  gt  lt  script gt  x000D   x000D   x000D

[tooltip] Show data on mouseover of circle

Examples related to tooltip

Examples related to mouseover

Examples related to d3.js