如何處理Raphael SVG的鼠標懸停事件

這是一個fiddle，展示了我正在嘗試做的一個示例。（我知道它看起來不正確，但它只是需要一些改變，這不是我面臨的問題：p）。如何處理Raphael SVG的鼠標懸停事件

我使用Raphael SVG創建餅圖，工具提示也是一個svg元素。

draw_tooltip(SVGpaper, this, 0);

用於清除工具提示。

問題是我不明白如何正確處理mouseover事件。在清除以前的工具提示後，工具提示需要彈出，每個事件我都嘗試使用計數器進行管理。但從小提琴中可以看出，鼠標懸停事件並不順利。此外，它甚至在轉移到其他弧線以及從餡餅移出時保持不變。

Pleae建議一些解決方案！

來源

2013-11-28 P Kero

我懷疑你遇到的問題是，爲工具提示顯示的新路徑/元素會干擾鼠標事件，從而阻止事件的發生。因此，如果拖動/移動，Raphael可能會對鼠標事件有點費勁。這可能有幾種不同的方式。人們可能會更全面地處理事件並決定如何處理它們，或者如果您不介意，請將工具提示從光標位置稍微移動一點。

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處理它，或者可能需要處理附加到弧以外的其他元素的處理程序，這可能取決於頁面的複雜性。看看這個解決方案是否可行。

這裏提琴http://jsfiddle.net/74YNb/13/（文本對齊可能需要調整所有瀏覽器）

來源

2013-11-28 14:57:31 Ian

謝謝。這似乎在小提琴上奏效。但是我需要嘗試其他方法，因爲圖表包含更復雜的數據。我一定會記住你的解決方案！ –

我認爲如果有更復雜的數據，只要沒有很多對象相互重疊，解決方案就可以工作。如果你提出了一個新的問題和其他任何問題，我相信人們會找到一種方法。如果你發現你做了很多，你可能會覺得值得看看d3 svg項目，它更適合處理圖表和數據，並且已經相當成熟。 – Ian

如何處理Raphael SVG的鼠標懸停事件

回答

相關問題