D3.js Div Tooltip不再出现在WordPress中

Question

我是一个新生WordPress的家伙，他试图在使用WordPress构建的新网站上显示我的小型d3.js portofolio收藏。这样做后，我遇到了一个小问题：我在特定的博客页面中显示我的作品，该页面可以通过单击" Visual Blog"顶部导航菜单访问。

文章中有一个标题为"国家生长的国内产物：气泡力图"，其中嵌入了d3.js的可视化编辑。如果您徘徊在泡沫上，则假设出现一个工具提示，显示各种信息，直到昨天，我添加了名为"英国君主家族树：力量导向图"的新文章之后，它的顶部是泡泡工具提示不再显示鼠标悬停事件。

如果您直接访问文章，该工具提示仍然可以正常工作，但是当从顶部导航菜单中访问博客页面时，该工具提示不会。

。

这是相关代码段：

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");
     /*.....*/
 });

这很令人困惑，因为我使用相同的技术在我的其他文章中显示和确定工具提示位置，例如各种" Barchart"文章，它们都可以正常工作，除了仅此气泡图表...

注意1：我在Opera上进行了测试。

注2：我试图从博客页面中删除"英国君主家族树：实力的图形"文章，该文章是恢复正常的工具提示。我再次发布了它，工具提示不再出现...

Answer 1

依靠绝对工具提示定位似乎不可能，因为WordPress博客总是随着新文章而增长，与d3.event.pagex和d3.event.event.pagey.pagey变量混乱。更不用说作为WordPress的新手，我对WordPress系统的工作方式仍然缺乏。

，我只是将工具提示相对于整个动态页面本身（通过d3.event.pagex and d3.event.pagey），而是直接将工具提示直接附加到每个鼠标上的SVG上，请使用d3.mouse（this），而不是d3.event，并在鼠标外事件中删除工具提示SVG元素。

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();
   })

如您所见，如果您在博客页面中看到文章，或者直接访问文章。