悬停在栏上时如何使工具提示跟随光标

Question

Here's my code in sandbox

沙箱中的代码可以正常运行，（基于组件），但是当我实际传输它时，则无法正常工作

Answer 1

如果您在Sandbox / JSBin或类似程序中共享代码的工作示例，则

最好。这样就更容易帮助了。

但是有一件事： 在d3的v4中

  

d3.mouse（容器）

     

返回当前事件相对于x和y坐标   指定的容器。

您想要的是d3.event.pageX，它可以为您提供：

  

一个整数值，以像素为单位，指示事件发生时鼠标指针所在的X坐标。不管文档当前的水平滚动偏移量如何，该值都相对于整个文档的左边缘。

但是可以肯定的是，我需要看一个可行的例子来尝试一下。

Answer 2

专门针对D3 v4：

使用d3附加div：

const tooltip = d3
      .select('body')
      .append('div')
      .attr('class', 'tooltip');

现在添加一个mousemove和mouseout侦听器：

  d3.on('mousemove', () => {
    return tooltip
      .style('top', d3.event.pageY - 30 + 'px')
      .style('left', d3.event.pageX + 'px');
  })
  .on('mouseout', function() {
    d3.select(this)
      .transition()
      .duration(this.transitionDuration * 0.2)
      .style('fill', `green`);
    return tooltip.style('visibility', 'hidden');
  });