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

我是一個新生的WordPress的人，試圖展示我的小d3.js portofolio收集在my new site建立使用wordpress。在這樣做時，我遇到了一個小問題：我在一個特定的博客頁面中顯示我的作品，點擊'Visual Blog'頂部導航菜單即可訪問它。d3.js div工具提示不再出現在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"); 
    /*.....*/ 
});

這是很令人困惑，因爲我用同樣的方法來顯示和確定我的其他文章提示的位置，如各種「BARCHART」的文章，他們'一切工作正常，除了這個氣泡圖單獨...

注1：我測試了這個在Opera上。

注2：我試圖從博客頁面中刪除'英國君主系列樹：強制導向圖'文章，工具提示恢復正常。我再次發佈它，工具提示不再出現...

來源

2017-09-02 Rickard

您可以提供更多關於如何計算定位工具提示的Y偏移量的上下文嗎？當Monarch博客文章出現時，工具提示仍然出現 - 但是它位於頁面下方，位於卷軸下方，與「Dark Souls」博客文章重疊。你可以通過在頁面上縮小約50％來看到這一點。 – brittanystoroz

哦，我看到它@brittanystoroz，工具提示移開了那麼遠。我上面發佈的是我如何計算Y偏移位置'.on（「mousemove」，function（d）{var this = this.getBBox（）。width/2，myX = this.getBBox（）。x， MYY = this.getBBox（）Y; tooltip_div .style（「左」，函數（）{ 回報（（d3.event.pageX - 250）+ R）+ 「PX」; }）。。樣式（「top」，function（）{return}（d3.event。pageY - 470）+「px」; }）; }）'，原始源代碼中沒有任何額外的代碼 – Rickard

然而，對於其他文章沒有發生這種情況......'條形圖'工具提示在添加另一篇文章之前和之後仍然顯示正常... – Rickard

由於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，可以獲得穩定的工具提示定位。

來源

2017-09-02 13:55:15 Rickard

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

回答

相關問題