工具提示不會出現在d3.js中的重疊圓圈

我正在創建散點圖，其中點有時彼此重疊。在任何這些點上鼠標懸停時，工具提示閃爍或有時不會出現。任何人都可以幫助我解決這個問題嗎？工具提示不會出現在d3.js中的重疊圓圈

dots.on("mouseenter", function(d) { 
       d3.select(this).attr({ 
        r: radius * 2 
       }); 
       d3.selectAll(".crosshair") 
        .style("display", "block"); 

       var xCoord = d3.mouse(this)[0]; 
       var yCoord = d3.mouse(this)[1]; 

       addCrossHair(xCoord, yCoord); 
       tooltipDiv 
        .style("top", (d3.event.pageY + 2) + "px") 
        .style("left", (d3.event.pageX - 28) + "px") 
        .style("opacity", 0.9) 
        .style("display", "block") 
        .html(content); 
      }); 

      dots.on("mouseout", function(d) { 

       d3.select(this).attr({ 
        r: radius 
       }); 
       d3.selectAll(".crosshair") 
        .style("display", "none"); 

       tooltipDiv.transition() 
        .duration(100)  
        .style("display", "none"); 
      }); 

     //tooltip // 
     var tooltipDiv = d3.select("#scatterChart") 
        .append("div") 
         .attr("class", "d3-tip n") 
         .style("opacity", 0) 
         .style("position","fixed") 
         .style("display", "block") 
         .style("top", 100) 
         .style("left", 100) 
         .style("pointer-events","none"); 

     //crossHair//    
     function addCrossHair(xCoord, yCoord) { 
      if(!xCoord || !yCoord){ // don't draw cross hair if no valid coordinates given 
       return; 
      } 
      d3.select("#h_crosshair") 
       .attr("x1", 0) 
       .attr("y1", yCoord) 
       .attr("x2", width) 
       .attr("y2", yCoord) 
       .style("display", "block"); 

      d3.select("#v_crosshair") 
       .attr("x1", xCoord) 
       .attr("y1", 0) 
       .attr("x2", xCoord) 
       .attr("y2", height) 
       .style("display", "block"); 
     }

來源

2017-06-06 Deeksha Mulgaonkar

請添加一個[mcve]，展示您面臨的問題。 –

雖然你的努力包括一個*最小*的例子acknoledged。它既不是完整的也不是可驗證的。請閱讀Robert Longson評論中鏈接的資源。如果有些事實上證明了這種效果，並且無所事事，那將會更容易幫助你。 – altocumulus

我得到了由我提出上述問題的解決方案。在鼠標移出時，提示給工具提示的持續時間導致閃爍問題。

 dots.on("mouseout", function(d) { 

      d3.select(this).attr({ 
       r: radius 
      }); 
      d3.selectAll(".crosshair") 
       .style("display", "none"); 

      tooltipDiv.transition()  
       .style("display", "none"); 
     });

在刪除持續時間（100）時，解決了上述問題。

來源

2017-12-02 05:39:37

工具提示不會出現在d3.js中的重疊圓圈

回答

相關問題