Question

我有一个d3饼图，显示悬停时的工具提示。我需要在工具提示框中有一个链接，但是一旦光标离开饼图，该框就会消失。当光标在里面时，如何修改mouseover / mouseout功能以保持打开状态？

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

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

这是我的fiddle

Answer 1

这很棘手。通常，您只需在CSS中的工具提示上设置pointer-events:none;，这样它就不会阻止鼠标事件进入下面的元素。但是，如果你这样做，那么你的链接将无效！

我假设您的最终目的是让工具提示显示在饼图的顶部或紧邻饼图。如果是这样，this answer与确定您的定位相关。

一个选项是将鼠标悬停/鼠标输出功能添加到工具提示中，以便鼠标悬停在工具提示上会触发它自己的可见性，而鼠标输出会启动过渡以使其消失 - 但仅当鼠标不亮时立即触发鼠标悬停再次将其淡入！

我不是JQuery的专家，但是如果它们的转换与D3转换的工作方式相同，那么当你从SVG转移到工具提示时，“淡入”转换应该取消刚刚开始的“淡出”转换，用户没有注意到。只需确保淡出的过渡或延迟相当长，以便用户从一个元素移动到另一个元素。

如果你希望弹出窗口在角落里，我看不出你怎么做，并且在鼠标离开饼图后让它淡出。无论如何，并非没有让你的用户疯狂。

d3饼图，工具提示中有链接

1 个答案: