Question

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

这些文章中有一篇名为“国内增长的国内产品：泡沫力图”，其中嵌入了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，则会提供稳定的工具提示定位。

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

1 个答案: