时间戳

首页 > 解决方案 > 在 d3 中添加悬停工具提示气泡图

javascript - 在 d3 中添加悬停工具提示气泡图

问题描述

我是 D3 的新手并尝试根据以下内容创建气泡图https://bl.ocks.org/HarryStevens/54d01f118bc8d1f2c4ccd98235f33848

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

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

标签： javascriptd3.js

解决方案

你看过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)

推荐阅读