Как обработать событие mouseover для Raphael SVG

Question

Вот fiddle, показывающий пример того, что я пытаюсь сделать. (Я знаю, что это выглядит неправильно, но для этого нужны только некоторые изменения, и это не проблема, с которой я столкнулся: p).

Im создает круговую диаграмму с использованием Raphael SVG, а всплывающая подсказка также является элементом svg.

draw_tooltip(SVGpaper, this, 0); 

Используется для очистки всплывающей подсказки.

Проблема в том, что я не понимаю, как правильно обрабатывать событие mouseover. На каждом событии всплывающая подсказка всплывает после очистки предыдущей всплывающей подсказки, которую я пытался использовать с помощью счетчика. Но, как видно из скрипки, событие mouseover не является гладким. Кроме того, он остается даже при переходе на другие дуги и когда он выходит из пирога.

Pleae предлагает некоторое решение!

Answer 1

Я подозреваю, что проблема связана с тем, что новый путь/элемент, который отображается для всплывающей подсказки, затем мешает событиям мыши, останавливая событие от работы. Таким образом, Рафаэль может быть немного странным для событий мыши, если перетаскивать/перемещать. Там, вероятно, есть несколько разных способов. Можно обрабатывать события более глобально и решать, что с ними делать, или если вы не против, переместите всплывающую подсказку немного дальше от местоположения курсора.

arc.mouseover(function (e) { 
    x = e.pageX + 50; 
    y = e.pageY; 
    draw_tooltip(this, 1, display_text, x, y); 

}); 
arc.mouseout(function(e) { 
    popup.remove(); 
    popup_txt.remove(); 
    transparent_txt.remove(); 
}); 

arc.mousemove(function(e) { 
    popup.attr({ x: e.pageX - 70, y: e.pageY - 70 }); 
    popup_txt.attr({ x: e.pageX - 25, y: e.pageY - 45}); 
    transparent_txt.attr({ x: e.pageX - 120, y: e.pageY - 120 }); 
}); 

}

Я также изменил путь к прямоугольнику и паре бит, но главное держит подсказку от места проведения мероприятия. В противном случае я задаюсь вопросом, может вам понадобиться обработать его из jquery или, возможно, к обработчику, прикрепленному к другим элементам, чем дуга, что может зависеть от сложности страницы. Посмотрите, будет ли это решение работать.

Fiddle здесь http://jsfiddle.net/74YNb/13/ (выравнивание текста может понадобиться настройки для всех браузеров)