title: Centering an HTML div overlay on an SVG chart
body: <p>I've got an SVG pie chart that I've drawn with D3, and I've got a small HTML div that is supposed to appear when one mouses over the various slices of the pie chart, like so:</p>
  
  <p><a href="http://jsfiddle.net/adamehirsch/bzSpW/" rel="nofollow">http://jsfiddle.net/adamehirsch/bzSpW/</a></p>
  
  <p>The problem comes in positioning that HTML  overlay. Currently, I'm having to explicitly position it relative to the entire page. The below comes in around line 145 of the javascript:</p>
  
  <pre><code>d3.select("#bracketsTip")
      .style("left", "420px") // this is dumb
      .style("top", "320px")  // and unnecessary, I'm sure
  .transition()
      .duration(250)
      .style("opacity", 1.0);
  </code></pre>
  
  <p>I'm looking for a way to have the HTML div appear centered on the pie chart without having to specify the pixel offset myself.  Suggestions?</p>