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

Question

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

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

我怎样才能做到这一点？

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

Answer 1

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

这是一个简单的例子.