javascript - d3.js div 工具提示不再出现在 wordpress 中

Question

我是一名 wordpress 新手，他试图在 my new site 上展示我的小型 d3.js 作品集。使用 wordpress 构建。这样做时我遇到了一个小问题:我在特定的博客页面中显示我的作品，该页面可通过单击“视觉博客”顶部导航菜单访问。

文章中有一篇标题为“国家国内生产总值增长:气泡力图”，其中嵌入了 d3.js 可视化。如果你将鼠标悬停在一个气泡上，假设会出现一个显示各种信息的工具提示，直到昨天它都可以正常工作，在我在它上面添加了名为“英国君主家族树:力定向图”的新文章之后，气泡工具提示突然不再显示鼠标悬停事件。

如果您访问 the article directly，工具提示仍然可以正常工作，但是在博客页面中访问时却没有 from top navigation menu ，如上所述。

这是相关的代码片段:

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

这很令人困惑，因为我在我的其他文章中使用了相同的技术来显示和确定工具提示位置，例如各种“条形图”文章，它们都工作正常，除了这个气泡图......

注意 1:我在 Opera 上测试过。

注意 2: 我试图从博客页面删除“英国君主家族树:强制定向图”一文，工具提示恢复正常。我再次发布它，工具提示不再出现......

Answer 1

依靠绝对的工具提示定位似乎是不可能的，因为 wordpress 博客总是随着新文章的增加而增长，弄乱了 d3.event.pageX 和 d3.event.pageY 变量。更不用说作为一个 wordpress 新手，我对 wordpress 系统如何工作的知识仍然缺乏..

我没有将工具提示相对于整个动态页面本身定位(通过 d3.event.pageX 和 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();
   })

如您所见，无论您是否看到 the blog page 中的文章，这都会提供稳定的工具提示定位。 ，或者如果您访问文章 directly .