ratón sobre el texto en el centro de gráfico de anillos no muestra la información sobre herramientas

KnowledgeSeeker001:

Estoy teniendo un proyecto d3js v5 con 5 angular. Tengo algunos problemas de ese evento mouseover no se activa en el elemento de texto colocado en el centro de la misma.

mi código de proyecto está disponible en https://stackblitz.com/edit/angular-menuni?embed=1&file=src/app/app.component.ts

la cuestión es si se coloca un ratón sobre el texto llamado "Total" se debe mostrar la punta de la herramienta. sin embargo, no se muestra la información de herramienta y que muestra una punta de herramienta diferente que i expected.some tiempo que exhiba la punta de la herramienta destinada a la sección de ruta de la tabla de doughntu.

El siguiente es el código que Addé el evento mouseover sobre el total de texto

 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); 
});

Realmente agradecería cualquier ayuda.

Países Bajos:

Tiene dos errores relativos al problema con la descripción.

1) La descripción es la representación en la parte superior del cursor, se debe cambiar la distancia al cursor (40 a 50 era suficiente)

2) Ha adjunta el texto en el grupo de arcos, en lugar de un grupo mayor en el elemento SVG. Esta es la razón por la descripción se desencadena cuando se pasa sobre el arco final. Se debe añadir el texto a SVG en lugar del grupo arco.

      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)

Ejemplo de trabajo: https://stackblitz.com/edit/angular-sg2zrk