在D3中添加悬停工具提示气泡图

Question

我是D3的新手，并尝试根据以下https://bl.ocks.org/HarryStevens/54d01f118bc8d1f2c4ccd98235f33848

创建气泡图

我已经更新了数据，气泡适用于我指定的数据。但是，我尝试添加一个悬停工具提示，以显示有关悬停的圆的数据。 在d3中研究了圈子上悬停提示的其他实现后，尝试过的解决方案不起作用。

我想根据上述示例在将鼠标悬停在圆圈上时是否有一种非常简单的基本方法来创建工具提示

Answer 1

您看过d3-tip吗？将工具提示添加到可视化中，并且可以自定义。下面的示例代码：

/* Initialize tooltip */
tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

/* Invoke the tip in the context of your visualization */
vis.call(tip)

/* Show only when hovering over a circle */
vis.selectAll('circle')
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)