title: D3 graph tooltip should show nearest point on hover
body: <p>I have made a graph using D3 but the problem is that I want its tooltip to appear on the graph as per nearest mouse point over in the graph. I have also seen one example on StackOverflow here on this link - <a href="https://stackoverflow.com/questions/34211819/d3-get-nearest-value-from-ordinal-axis-on-mouseover">D3: Get nearest value from ordinal axis on mouseover</a>. Which is doing the exact what I want but when I implemented the same code on my graph then it is not working. Please take a look at my code and suggest me changes.</p>
  
  <p>IMPORTANT!: I also want when someone double click on the graph then tooltip x'axis &amp; y'axis coordinated stay there. Your valuable time is highly appreciated. Please Help!!!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='chartdiv'&gt;&lt;/div&gt;
  &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function getData(){ 
  data1 = [{x:1,y:15},{x:2,y:26},{x:3,y:17},{x:4,y:21},];
  return data1};
  
  function drawChart(data) {
  var coreheight = 720
  var corewidth = 1280
  var margin = {top: 10, right: 30, bottom: 100, left: 60}
  , width = corewidth - margin.left - margin.right
  , height = coreheight - margin.top - margin.bottom;
  
  var xExtent = d3.extent(data, function(d) { return d.x; }),
  xRange = xExtent[1] - xExtent[0],
  yExtent = d3.extent(data, function(d) { return d.y; }).reverse(),
  yRange = yExtent[1] - yExtent[0];
  
  var xScale = d3.scaleLinear().range([50, width]).domain([xExtent[0] - (xRange * .05), xExtent[1] + (xRange * .05)]);;
  var yScale = d3.scaleLinear().range([0, height]).domain([yExtent[0] - (yRange * .1), yExtent[1] + (yRange * .05)]);;
  
  var line = d3.line()
   .x(function(d, x) { return xScale(d.x); })
   .y(function(d, y) { return yScale(d.y); })
   .curve(d3.curveMonotoneX);
  
  d3.select('#chartdiv')
   .append('svg')
   .attr('class','graph')
   .style('background-color','#fff')
   .attr("viewBox", "0 0 "+ corewidth +" "+ coreheight +"");
  
  var svg = d3.select(".graph")
   .append("g")
   .attr("class", "dchart")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  svg.append("g")
   .attr("class", "y axis")
   .call(d3.axisLeft(yScale).ticks(7))
   .attr("transform", "translate(50, 0)")
   .attr('font-size','25px');
  
  svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(xScale).ticks(7))
   .attr('font-size','25px');
  
  svg.append("path")
   .datum(data)
   .attr("class", "line")
   .attr("d", line);
  
  svg.selectAll(".dot")
   .data(data)
   .enter()
   .append("circle")
   .attr("class", "dot")
   .attr("cx", function(d) { return xScale(d.x) })
   .attr("cy", function(d) { return yScale(d.y) })
   .attr("r", 8)
   .on("mouseover", mousehover)
   .on("mouseout", mousehoverout) 
  
  function mousehover(d) { 
     svg.append("text")
      .attr('class','annot')
      .attr('x', xScale(d.x) - 20)
      .attr('y', yScale(d.y) - 23)
      .text(d.x+','+d.y)
      .style('font-size','30px')
     svg.append('line')
      .attr('class','annot')
      .style("stroke", "black")
      .attr('stroke-width','3')
      .attr("x1", xScale(d.x))
     .attr("y1", yScale(d.y))
      .attr("x2", xScale(d.x))
      .attr("y2", height);
      }
  
  function mousehoverout() {  
      d3.selectAll('.annot').remove()
    }
  
  }drawChart(getData());
  &lt;/script&gt;
  
  &lt;style&gt;
  .line {fill: none;stroke: darkblue;stroke-width: 3}
  .dot {fill: darkblue;stroke-width:0}
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>