Skip to content

Instantly share code, notes, and snippets.

@kynnjo

kynnjo/index.html

Last active December 25, 2015 07:19
Show Gist options
  • Save kynnjo/6938712 to your computer and use it in GitHub Desktop.
Save kynnjo/6938712 to your computer and use it in GitHub Desktop.
Download ZIP
how to control overflow?
Raw
index.html
<!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="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment