Question

我有一个d3散点图。我有一个工具提示，显示我何时鼠标悬停一个点。我想做两件事。

1）只要我的鼠标位于点或工具提示之上，我希望鼠标悬停保持打开状态。 2）我想在工具提示中添加一个可点击的链接。我认为为了使这项工作需要＃1。

我该怎么做？

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

Answer 1

一个想法可能是在圆圈的鼠标输出上创建延迟转换，以允许用户有时间鼠标到工具提示。如果他们及时将鼠标悬停在圆圈上，您将取消转换并隐藏工具提示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。

Answer 2

可能没有简单的方法可以做到。

一个选项是将工具提示嵌套在与圆相同的容器内（即svg <g>）并将鼠标事件附加到该父级，这样当鼠标在工具提示和圆圈之间移动时它会赢得＆＃ 39; t触发mouseout。这样就很难在圆圈之间转换工具提示，因为它会涉及将它从一个父项中分离并附加到另一个父项。

可能更简单的选项是将mouseover和mouseout事件附加到工具提示，并设置标记（如isOverTooltip = true或false）以跟踪鼠标的位置。然后在圆圈的鼠标输出中检查此标志以确定是否隐藏工具提示。在这种情况下，在圆圈的鼠标输出内部，您可能希望隐藏setTimeout内的工具提示（当然仅在!isOverTooltip时），以便让鼠标有时间在圆圈和工具提示没有工具提示消失。

当鼠标悬停在工具提示上时，如何让d3鼠标悬停？

2 个答案: