d3.js div tooltip not appearing anymore in wordpress

Question

I'm a freshman wordpress guy who tried to display my small d3.js portofolio collection at my new site built using wordpress. Upon doing so i encountered a small problem : i display my works in a specific blog page, which is accessed by clicking the 'Visual Blog' top navigation menu.

Among the articles is one titled 'Growth Domestic Products of Nations : Bubble Force Chart' which has d3.js visualization embed-ed in it. If you hover on a bubble, there suppose to be a tooltip appear which displays various info, which works fine until yesterday, after i added new articles titled 'British Monarch Family Tree : Force Directed Graph' on top of it, the bubble tooltip suddenly not displaying anymore on mouse hover event.

The tooltip still works fine if you access the article directly , however it doesn't when accessed in the blog page from top navigation menu , as described above.

Here is the relevant code snippet :

bubbles
.on("mouseover", function(d){
     tooltip_div.style("display", "inline");
     /*.....*/
 })
.on("mousemove", function(d){
      var r = this.getBBox().width/2, myX = this.getBBox().x, myY = this.getBBox().y;

      tooltip_div
         .style("left", function(){
            return ((d3.event.pageX - 250)+ r) + "px";
          })
         .style("top", function(){
             return (d3.event.pageY - 470) + "px";
          });
 })
.on("mouseout", function(d){
       tooltip_div.style("display", "none");
     /*.....*/
 });

It is quite confusing, since i used the same technique to display and determine tooltip position at my other articles, such as the various 'Barchart' articles, they're all works fine, except for this bubble chart alone...

Note 1 : i tested this on Opera.

Note 2 : i tried to delete the 'British Monarch Family Tree : Force Directed Graph' article from the blog page, the tooltip back to normal. I posted it again, the tooltip not appearing again...

Answer 1

It seems imposible to rely on absolute tooltip positioning since a wordpress blog is always growing with new articles, messing with the d3.event.pageX and d3.event.pageY variables. Not to mention as a wordpress newbie, my knowledge about how wordpress system works is still lacking..

Instead of positioning the tooltip relative to the entire dynamic page itself (by means of d3.event.pageX and d3.event.pageY), i just append the tooltip directly onto the SVG on every mouse over, adjust the position using d3.mouse(this) as opposed to d3.event earlier, and delete the tooltip SVG element on mouse out event..

var countryText;

bubbles
  .on("mouseover", function(d){
     countryText = bubbleGroup.append("text")
        .attr("class", "countryText")
        .attr("font-size", 13)
        .attr("font-weight", "bold")
        .text(d.country)
        .style("pointer-events", "none")
        .attr("x", d3.mouse(this)[0] - 60)
        .attr("y", (d3.mouse(this)[1] - 20)); 
   })
  .on("mousemove", function(d){
     countryText
       .attr("x", d3.mouse(this)[0] - 60)
       .attr("y", (d3.mouse(this)[1] - 20));
   })
  .on("mouseout", function(d){
     d3.select(".countryText").remove();
   })

As you can see, this gives stable tooltip positioning wether if you see the article in the blog page , or if you access the article directly .