title: position a tooltip over a table cell with translate() in d3.js
body: <p>I'm creating a table from json data &amp; d3, as shown here: <a href="https://jsfiddle.net/rpardee/ku3q6txw/41/" rel="nofollow noreferrer">https://jsfiddle.net/rpardee/ku3q6txw/41/</a></p>
  
  <p>I'm using mouseenter with d3.mouse() to get the x,y coordinates of the mouse pointer but need to translate the coordinates I get back from .mouse() into pixel locations that I can feed into translate() so as to properly place the tooltip.  So far my flailing has resulted in:</p>
  
  <pre><code>    // Move the tooltip over to where the mouse pointer is
      // There has *got* to be a better way of doing this.
      const coords = d3.mouse(this);
      const xpos = table._groups[0][0].clientWidth - coords[0] ;
      const ypos = table._groups[0][0].clientHeight - coords[1] ; ;
      imp_tooltip.style("transform", `translate(${xpos}px, ${ypos}px)`) ;
  
  </code></pre>
  
  <p>Which is close, but not close enough.</p>
  
  <p>I'm guessing there's a d3.scaleLinear() that I can set up to do this translation, but I'm stymied trying to figure out what to feed into the .domain() &amp; range() methods on that guy. </p>
  
  <p>Can anybody throw me a clue?</p>