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带有工具提示链接的饼图

回答

相关问题