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

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

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

但是我在折线图中也有条形图。因此，如果尝试使用此方法，将鼠标悬停在该条形图上时，将不再能够获得条形图的工具提示。

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