2

I have simple tooltip question but I couldn't find the solution. The codes below draw a doughnut chart. When user mouseovers a segment of pie, the tooltip should pop up in the middle of doughnut. But I don't know why it does not work here. Can anyone help to point out the problem? Here is JSbins

If I change the line 36 to d3.select(#pieChart), the tooltip works. However, for some reasons, I want the tooltip to append on svg.

Thanks a lot!

merylz
  • 175
  • 3
  • 11
  • 1
    Possible duplicate of [is it possible to append a div inside svg element](http://stackoverflow.com/questions/17595813/is-it-possible-to-append-a-div-inside-svg-element) – Paul Mar 22 '16 at 15:28
  • Like @Paul said, you can't use a `div` element inside an `svg`. What you want is to use a `g` (group) element and then append `text` elements to that, setting `.attr("y", )` to offset them vertically. Then all you'll have to change is `.html(...)` to `.text(...)` when you update the tooltip. – JSBob Mar 22 '16 at 15:31

1 Answers1

2

Not used JSBin a lot so I used JSFiddle : https://jsfiddle.net/thatoneguy/0qgzLk2L/

You can't append a div to svg so you have to create a container like so : 

 var svgContainer = d3.select('#pieChart');

And then append the svg to this : 

var svg = svgContainer.append('svg')

And now use the container for the tooltips : 

var tooltip = svgContainer
      .append('div')
thatOneGuy
  • 9,977
  • 7
  • 48
  • 90