how to control overflow?

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<style>

svg{display:block;}
svg{background:#eeeeee;}

</style>
</head><body>
  <table>
    <tr><td></td><td></td></tr>
  </table>
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script>
    jQuery(document).ready(function ($) {
      var data = ["one very very loooooooong label",
                  "and here's an even longer (and dumber) label"];

d3.selectAll('td')
         .append('svg')
           .attr({width: 125, height: 75})
         .append('g')
         .append('text')
           .attr({x:10, y:30})
           .style({'font-family': 'Courier',
                   'font-size': '10pt'})
           .data(data)
           .text(String)
           .on("mouseover", function(){
             d3.select(this.parentNode.parentNode).style('overflow', 'visible');
           })
           .on("mouseout", function(){
             d3.select(this.parentNode.parentNode).style('overflow', 'hidden');
           });
    });
  </script></body></html>

Modified http://code.jquery.com/jquery-latest.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-latest.min.js

https://d3js.org/d3.v3.min.js