将鼠标悬停在圆环图中的中心文本上未显示工具提示答案

【问题标题】：mouse over the center text in the doughnut chart is not displaying the tooltip将鼠标悬停在圆环图中的中心文本上未显示工具提示
【发布时间】：2020-06-26 05:47:27
【问题描述】：

我有一个 angular 5 的 d3js v5 项目。我有一些问题，鼠标悬停事件未在放置在其中心的文本元素上触发。

我的项目代码可在https://stackblitz.com/edit/angular-menuni?embed=1&file=src/app/app.component.ts获得

问题是，如果您将鼠标放在名为“Total”的文本上，它应该会显示工具提示。但是它没有显示工具提示，而是显示了我预期的不同工具提示。有时它会显示用于甜甜圈图航路部分的工具提示。

以下是在文本总数上添加鼠标悬停事件的代码

 let txtlabel =  g.append("text")
    .transition().delay(2000);

     txtlabel
      .attr("text-anchor", "middle")
      .attr("font-size", (labelSize)+'em')
      .attr("dy", '-1.5em')
      .text("Total");

    txtlabel
      .on('mouseover', function(d) {        
      div       
      .style("opacity", .9);        
      div.html(
      "<span>"+ "Total" + " : "  + total +"</span>" )   
      .style("left", (d3.event.pageX - 40) + "px")      
      .style("top", (d3.event.pageY - 40) + "px");  
     })
  .on('mousemove', function(d) {        
      div       
      .style("opacity", .9);        
      div.html(
      "<span>"+ "Total" + " : "  + total +"</span>" )   
      .style("left", (d3.event.pageX - 40) + "px")      
      .style("top", (d3.event.pageY - 40) + "px");  
     }) 
 .on('mouseout', function(d) {      
  div   
      .style("opacity", 0); 
});

非常感谢任何帮助。

【问题讨论】：

这个 div 在你的代码中是什么意思？
// 定义工具提示的 div let div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity ", 0);

标签： javascript angular d3.js svg ecmascript-6

【解决方案1】：

关于工具提示问题，您有两个错误。

1) 工具提示在光标上方呈现，您应该更改与光标的距离（40 到 50 就足够了）

2) 您已将文本附加到弧组中，而不是 SVG 元素中更高的一组。这就是为什么当您将鼠标悬停在最终弧上时会触发工具提示的原因。您应该将文本添加到 svg 而不是弧组。

      let txtLabel = svg
  .append("text")
  .text("Total")
  .on("mousemove", function(d) {
    div
    .style("opacity", .9);
    div.html(
    "<span>"+ "Total" + " : "  + total +"</span>" )
    .style("left", (d3.event.pageX - 50) + "px")
    .style("top", (d3.event.pageY - 50) + "px");
  })
  .transition()
  .delay(0)

工作示例：https://stackblitz.com/edit/angular-sg2zrk

【讨论】：