我是一个新生的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");
/*.....*/
});
这很令人困惑，因为我在其他文章（例如各种“ Barchart”文章）上使用了相同的技术来显示和确定工具提示的位置，因此，除了单独的气泡图，它们都工作正常。
注1：我在Opera上进行了测试。
注2：我试图从博客页面删除“英国君主族谱：强制定向图”文章，工具提示恢复正常。我又发布了一次，工具提示不再出现...
最佳答案
依靠绝对的工具提示定位似乎是不可能的，因为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，这将使工具提示的定位更加稳定。
关于javascript - d3.js div工具提示不再出现在wordpress中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46010539/