mouse over the center text in the doughnut chart is not displaying the tooltip

user_11957755 0
Viewed 382

I am having a d3js v5 project with angular 5 . I have some issues that mouseover event is not triggered on the text element placed in the center of it.

my project code is available at https://stackblitz.com/edit/angular-menuni?embed=1&file=src/app/app.component.ts

the issue is if you place a mouse over the text named "Total" it should display the tool tip . however it is not displaying the tooltip and showing a different tool tip that i expected.some time it display the tool tip intended for the enroute section of the doughntu chart.

enter image description here

the following is the code that adde the mouseover event on the text 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); 
});

really appreciate any help.

d3.js angular ecmascript-6 svg javascript
1 Answers

You have two mistakes concerning the tooltip issue.

1) The tooltip is rendering on top of your cursor, you should change the distance to the cursor (40 to 50 was sufficient)

2) You have appended the text in the group of arcs, instead of one group higher in the SVG element. This is why the tooltip gets triggered when you hover over the final arc. You should add the text to svg instead of the arc group.

      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)

Working example: https://stackblitz.com/edit/angular-sg2zrk

user_107494130
Related