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

问题描述：

我有一个d3散点图。我有一个工具提示，当我mouseover一个点。我想做两件事。

I have a d3 scatterplot. I have a tooltip which shows when I mouseover a point. I want to do two things.

1）我想让鼠标悬停，只要我的鼠标在点或工具提示上，保持打开。
2）我想在工具提示中添加一个可点击的链接。

1) I want the mouseover to stay open as long as my mouse is either over the point or the tooltip. 2) I want to put a clickable link in the tooltip. I believe that #1 is required in order to make this work.

我如何做到这一点？

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

答

以在鼠标的圆圈上创建延迟的转变，以允许用户将鼠标时间指向工具提示。如果他们在时间上将鼠标悬停在圆圈上，您将取消转换并在mouseout的tooltip div上隐藏工具提示：

One idea may be to create a delayed transition on the mouseout of the circle to allow the user time to mouse to the tooltip. If they mouseover the circle in time, you cancel the transition and hide the tooltip on mouseout of tooltip div:

// 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 。

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

相关推荐