如何在鼠标悬停在工具提示上时保持d3鼠标悬停状态？

我有一个d3 scatterplot。我有一个工具提示，当我将鼠标悬停在某个点上时显示。我想做两件事。如何在鼠标悬停在工具提示上时保持d3鼠标悬停状态？

1）我希望鼠标悬停，只要我的鼠标在点或工具提示上。 2）我想在工具提示中添加一个可点击的链接。为了完成这项工作，我相信＃1是必需的。

我该怎么做？

这里是我的代码： https://github.com/laran/eisenhower/blob/master/components/plot/scatterplot.js

2015-02-24 Laran Evans

大概没有简单的方法来做到这一点。

一种选择是巢作为圆相同的容器内的工具提示（即，SVG <g>），而将鼠标事件到该父，使得当鼠标工具提示和圆之间也不会触发鼠标移开。这将使转换圆圈之间的工具提示变得困难，因为它会涉及将其从父母分离并附着到另一父母。

也许更简单的选择是将mouseover和mouseout事件附加到工具提示，并设置一个标志（如isOverTooltip = true或false）以跟踪鼠标的位置。然后在圈出的鼠标中检查此标志以确定是否隐藏工具提示。在这种情况下，为了让鼠标能够在圆圈和工具提示之间移动而不会导致工具提示消失，您需要在setTimeout（当然仅在!isOverTooltip）内隐藏工具提示。

来源

2015-02-24 20:13:17 meetamit

奥普斯，没有意识到我在我的答案中撕掉了你的想法！ – Mark 2015-02-24 21:05:39

一个想法可能是在圆形的鼠标移出时创建延迟转换，以允许用户有时间将鼠标指向工具提示。如果将鼠标悬停在时间上一圈，你取消的过渡和隐藏工具提示上提示的div的mouseout：

// create tooltip 
var tip = d3.select('body') 
    .append('div') 
    .attr('class', 'tip') 
    .html('I am a tooltip...') 
    .style('border', '1px solid steelblue') 
    .style('padding', '5px') 
    .style('position', 'absolute') 
    .style('display', 'none') 
    .on('mouseover', function(d, i) { 
    tip.transition().duration(0); // on mouse over cancel circle mouse out transistion 
    }) 
    .on('mouseout', function(d, i) { 
    tip.style('display', 'none'); // on mouseout hide tip 
    }); 

... 

// mouseover and out of circle 
.on('mouseover', function(d, i) { 
    tip.transition().duration(0); // cancel any pending transition 
    tip.style('top', y(d.y) - 20 + 'px'); 
    tip.style('left', x(d.x) + 'px'); 
    tip.style('display', 'block'); 
    }) 
    .on('mouseout', function(d, i) { 
    tip.transition() 
    .delay(500) 
    .style('display', 'none'); // give user 500ms to move to tooltip 
    });

这里有一个快速example。

来源

2015-02-24 20:43:01 Mark

如何在鼠标悬停在工具提示上时保持d3鼠标悬停状态？

回答

相关问题