当鼠标靠近 D3 中的一条线时显示工具提示

Question

所以我在 D3js 中有一个折线图。我在这些点上添加了 svg circle 。如果用户将鼠标悬停在该圆圈上，他们会看到一个工具提示。

https://jsfiddle.net/jhynag08/38/

但我希望他们在靠近圆圈时看到工具提示（可能在 5-10 像素范围内）。我知道我可以添加一个背景矩形（全宽和全高）并做这样的事情 -> https://jsfiddle.net/53aLmt7r/1/

svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
  focus.style("display", null);
})
.on("mouseout", function() {
  focus.style("display", "none");
})
.on("mousemove", mousemove);

但我在折线图中也有条形图。因此，如果我尝试执行此方法，当我将鼠标悬停在条形图上时，我将无法再获得条形图的工具提示。

有没有办法在悬停工作的折线图周围设置某种“活动区域”？

Answer 1

一个简单的解决方案是给圆圈一个stroke 样式并使其透明，如下所示：

   .style("stroke","transparent")
   .style("stroke-width","15px")

这是更新后的fiddle