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

Question

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

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

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

这是一个更新的小提琴