0

I have read several articles and tutorials but couldn't find a sufficient answer on how to select the parent div of the svg using d3.select. I basically just want to append a tooltip to the div which contains my chart like this. 

//this selection probably doesn't make sense...
var tooltip = d3.select("#pie-svg").select(this.parentNode).append("div")
            .attr("class", "piechart-tooltip")
            .style("opacity", 0);
user3281466
  • 491
  • 1
  • 7
  • 25

1 Answers1

0

Along the lines of this question:

var tooltip;
d3.select("#pie-svg").each(function() {
  tooltip = d3.select(this.parentNode).append("div")
        .attr("class", "piechart-tooltip")
        .style("opacity", 0);
});

The problem with the code you've posted in the question is that this won't be defined (or set to the right element) in this context. When used with .each(), it will.

Community
  • 1
  • 1
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • Thanks, that worked fine. But I am now facing a problem of adding the tooltip to the correct place because before I would use d3.event.pageX and .pageY to get the mouse coordinates but now I need to know the coordinates relevant to the parent div of the svg. I tried using a similar approach and with mouse(container) but in the console it says 'undefined is not a function' so it doesn't recognise the parent div. I will post my code below so you can have a look. – user3281466 Jul 11 '14 at 11:30
  • I just tried mouse(this) and that does not return undefined. I am assuming the problem is because I cannot pass a parentNode as a container.. Have you got any suggestions on how I can work around this to be able to pass the div container to mouse() ? The div container is actually being resized dynamically as my window shrinks and I don't want to use mouse(this) because that doesn't always give me the correct position. – user3281466 Jul 11 '14 at 11:48
  • You could use absolute positioning for the tooltip and then still `pageX` and `pageY`. – Lars Kotthoff Jul 11 '14 at 12:32
  • I'm already using absolute positioning but it still completely goes off the container. – user3281466 Jul 11 '14 at 13:04
  • Could you post a complete example that shows the problem please? – Lars Kotthoff Jul 11 '14 at 13:09
  • I don't have access to all of the files on the database I am afraid and it would probably take me 2 hours to prepare a jsfiddle anyway... Are you perhaps familiar with the mouse(container) function? If I manage to correctly pass in the parent div in there then that would solve my problem.. – user3281466 Jul 11 '14 at 13:21
  • I just tested it and I can see that the temp contains the reference to the div. I think the "Uncaught TypeError: undefined is not a function " is because it doesn't accept a type like this. – user3281466 Jul 11 '14 at 14:44
  • Are you sure that the error is caused by this line? – Lars Kotthoff Jul 11 '14 at 14:49
  • yes because if I comment it out there is no problem. – user3281466 Jul 11 '14 at 14:52
  • what does parentNode actually return? is it the direct reference to the div or is it contained somewhere in an array of objects? – user3281466 Jul 11 '14 at 14:54
  • The direct reference. – Lars Kotthoff Jul 11 '14 at 14:55
  • If I do console.log(parent) (temp is the same as parent) this is what I'm seeing http://i.imgur.com/DqpDpUm.jpg – user3281466 Jul 11 '14 at 14:59
  • It would really help if you could provide a complete example. – Lars Kotthoff Jul 11 '14 at 15:08