在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)