при наведении курсора на центральный текст в кольцевой диаграмме не отображается подсказка - PullRequest
Новая
       27

при наведении курсора на центральный текст в кольцевой диаграмме не отображается подсказка

2 голосов
/ 14 марта 2020

У меня есть проект d3 js v5 с angular 5. У меня есть некоторые проблемы, связанные с тем, что при наведении курсора на текстовый элемент, помещенный в его центр, не запускается событие наведения мыши.

код моего проекта доступен по адресу https://stackblitz.com/edit/angular-menuni?embed=1&file=src / app / app.component.ts

проблема в том, что если вы поместите курсор мыши на текст с именем «Всего», он должен отобразить подсказку. однако он не отображает всплывающую подсказку и показывает другую подсказку, которую я ожидал. Иногда он отображает подсказку, предназначенную для сечения по маршруту диаграммы Doughntu.

enter image description here

ниже приведен код, который добавляет событие наведения курсора к тексту всего 

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

очень признателен за любую помощь.

1 Ответ

1 голос
/ 16 марта 2020

У вас есть две ошибки, касающиеся всплывающей подсказки.

1) Всплывающая подсказка отображается поверх курсора, вам следует изменить расстояние до курсора (достаточно от 40 до 50)

2) Вы добавили текст в группу дуги, вместо одной группы выше в элементе SVG. Вот почему всплывающая подсказка срабатывает, когда вы наводите курсор мыши на окончательный ар c. Вы должны добавить текст в svg вместо группы ar c. 

      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

...