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

Question

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

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

但我希望他们在接近圆圈时看到工具提示（可能在5-10px范围内）。我知道我可以添加一个背景矩形（全宽和高度）并做这样的事情 - ＆gt; 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);

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

有没有办法让某种活跃的区域＆＃34;在悬停工作的折线图周围？

Answer 1

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

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

这是更新后的fiddle