title: Show tooltip when mouse is near a line in D3
body: <p>So I have a line chart in D3js. I've added svg circle on the points. If user hover over that circle they see a tooltip. </p>
  
  <p><a href="https://i.stack.imgur.com/kYpeg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYpeg.png" alt="enter image description here"></a>
  <a href="https://jsfiddle.net/jhynag08/38/" rel="nofollow noreferrer">https://jsfiddle.net/jhynag08/38/</a></p>
  
  <p>But I want them to see tooltip when they are close to the circle(maybe in 5-10px range). I know I could add a background rectangle(full width and height) and do something like this -> <a href="https://jsfiddle.net/53aLmt7r/1/" rel="nofollow noreferrer">https://jsfiddle.net/53aLmt7r/1/</a></p>
  
  <pre><code>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);
  </code></pre>
  
  <p>But I also have bar chart inside line chart. So If I try to do this method, I no longer able to get tooltip of bar chart when I hover over it. </p>
  
  <p>Is there a way to just have some kind of "active area" around the line chart where hover works?</p>