d3帶有工具提示鏈接的餅圖

我有一個d3餅圖，顯示懸停時的工具提示。我需要在工具提示框中有一個鏈接，但是一旦光標離開餅圖，該框就會消失。如何修改mouseover/mouseout函數在光標位於內部時保持打開狀態？d3帶有工具提示鏈接的餅圖

.on('mouseover', function (d) { 
$("#tooltip") 
    .html(d.data.label) 
    .stop(true).fadeTo(800, 1); 
})    

.on('mouseout', function (d) { 
$("#tooltip").fadeOut(900, 0); 
});

這裏是我的fiddle

來源

2014-01-16 khds120

這是棘手的。通常，您只需在CSS中的工具提示上設置pointer-events:none;，以便它不會阻止鼠標事件進入下面的元素。但是，如果你這樣做，那麼你的鏈接將無法工作！

我假設你的最終目的是讓工具提示顯示在餅圖頂部或緊鄰的位置。如果是這樣，this answer與獲取您的定位權有關。

一種選擇是將鼠標懸停/鼠標懸停功能添加到工具提示中，以便鼠標懸停在工具提示上會觸發它自己的可見性，並且鼠標懸停會啓動轉換以便淡入淡出 - 但只有當鼠標不會立即觸發鼠標懸停再次回到！

我不是JQuery的專家，但是如果他們的轉換與D3轉換的工作方式相同，那麼當您從SVG移至工具提示時，「淡入」轉換應該取消剛開始的「淡出」轉換所以用戶不會注意到。只要確保淡出的過渡或延遲對於用戶從一個元素移動到另一個元素來說是相當長的。

如果你想要彈出在角落裏，我不明白你怎麼能做到這一點，也讓它在鼠標移動餅圖後淡出。無論如何，不是沒有讓你的用戶瘋狂。

來源

2014-01-16 22:40:54 AmeliaBR

與小提琴代碼概念的快速和骯髒的證據：http://jsfiddle.net/fQ74M/1/但同樣，你想要的提示更接近了很多圖表，所以它不會成爲用戶在它消失之前進行的比賽！ – AmeliaBR

這樣的作品，是的，工具提示應該是右邊的圖表上方。謝謝您的幫助。 – khds120

d3帶有工具提示鏈接的餅圖

回答

相關問題