Skip to content

Instantly share code, notes, and snippets.

@erikhazzard

erikhazzard/index.html

Forked from enjalot/index.html
Created February 14, 2012 19:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save erikhazzard/1829221 to your computer and use it in GitHub Desktop.
Save erikhazzard/1829221 to your computer and use it in GitHub Desktop.
Download ZIP
d3 tspan append
Raw
index.html
<html>
<meta charset='utf-8' />
<head>
</head>
<body>
Pause Delay (ms): <input id='pause_delay' type='text' placeholder=200 />
<input id='render_nodes_blocking' value='Render (blocking)' type='button' style='font-size:1.2em;'/>
<input id='render_nodes_non_blocking' value='Render (non blocking)' type='button' style='font-size:1.2em;'/>
<br />
<hr />
<br />
<svg>
<text x="0" y="20"><tspan>Node 1</tspan></text>
<text id='text_node_1' x="20" y="50">
<tspan>You</tspan>
<tspan dx='.5em'>shall</tspan>
<tspan dx='.5em' dy='.9em'>not</tspan>
<tspan dx='.5em' dy='.9em'>pass</tspan>
</text>
<rect id='text_node_1_rect'
height='75'
fill='none'
stroke='#343434'
width='200'
x='0'
y='30'
></rect>
<text x="250" y="20"><tspan>Node 2</tspan></text>
<text id='text_node_2' x="270" y="50"></text>
<rect id='text_node_2_rect'
height='75'
fill='none'
stroke='#343434'
width='200'
x='250'
y='30'
></rect>
<text x="0" y="145"><tspan>Node 3</tspan></text>
<text id='text_node_3' x="20" y="170">
<tspan>You</tspan>
<tspan dx='10px'>shall</tspan>
<tspan dx='10px' dy='20px'>not</tspan>
<tspan dx='10px' dy='20px'>pass</tspan>
</text>
<rect id='text_node_3_rect'
height='75'
fill='none'
stroke='#343434'
width='200'
x='0'
y='150'
></rect>
<text x="250" y="145"><tspan>Node 4</tspan></text>
<text id='text_node_4' x="270" y="170"></text>
<rect id='text_node_4_rect'
height='75'
fill='none'
stroke='#343434'
width='200'
x='250'
y='150'
></rect>
</svg>
<script src='http://mbostock.github.com/d3/d3.js'></script>
<script>
function log(node_id){
var node = document.getElementById(node_id);
console.log('NODE: ', node_id);
console.log('BBOX: ', node.getBBox());
console.log('\tBBOX width: ',
node.getBBox().width,
' | height: ',
node.getBBox().height);
console.log('Computed text length: ', node.getComputedTextLength());
}
function pause(delay){
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < delay);
console.log('done with pause')
}
function create_nodes_blocking(delay){
//Node 2 Auto create with EMs
d3.select('#text_node_2').append('tspan')
.text('You');
pause(delay);
d3.select('#text_node_2').append('tspan')
.text('shall')
.attr('dx', '.5em');
d3.select('#text_node_2').append('tspan')
.text('not')
.attr('dx', '.5em')
.attr('dy', '.9em');
pause(delay);
d3.select('#text_node_2').append('tspan')
.text('pass')
.attr('dx', '.5em')
.attr('dy', '.9em');
//Node 4 Auto create with EMs
//NOTE: If this is in a function, it will NOT work
pause(delay);
d3.select('#text_node_4').append('tspan')
.text('You');
pause(delay);
d3.select('#text_node_4').append('tspan')
.text('shall')
.attr('dx', '10px');
pause(delay);
d3.select('#text_node_4').append('tspan')
.text('not')
.attr('dx', '10px')
.attr('dy', '20px');
pause(delay);
d3.select('#text_node_4').append('tspan')
.text('pass')
.attr('dx', '10px')
.attr('dy', '20px');
console.log('=======================================================');
log('text_node_1');
console.log('=======================================================');
log('text_node_2');
console.log('=======================================================');
log('text_node_3');
console.log('=======================================================');
log('text_node_4');
}
//Will ALWAYS work on chrome dev
//create_nodes(200);
function create_nodes_non_blocking(delay){
if(delay === undefined){var delay=200;}
//Node 2 Auto create with EMs
setTimeout(function(){d3.select('#text_node_2').append('tspan')
.text('You');}, delay);
setTimeout(function(){d3.select('#text_node_2').append('tspan')
.text('shall')
.attr('dx', '.5em');}, delay * 2);
setTimeout(function(){d3.select('#text_node_2').append('tspan')
.text('not')
.attr('dx', '.5em')
.attr('dy', '.9em');}, delay * 3);
setTimeout(function(){d3.select('#text_node_2').append('tspan')
.text('pass')
.attr('dx', '.5em')
.attr('dy', '.9em');}, delay * 4);
//Node 4 Auto create with EMs
//NOTE: If this is in a function, it will NOT work
setTimeout(function(){d3.select('#text_node_4').append('tspan')
.text('You');},delay * 5);
setTimeout(function(){d3.select('#text_node_4').append('tspan')
.text('shall')
.attr('dx', '10px');},delay * 6);
setTimeout(function(){d3.select('#text_node_4').append('tspan')
.text('not')
.attr('dx', '10px')
.attr('dy', '20px');},delay * 7);
setTimeout(function(){d3.select('#text_node_4').append('tspan')
.text('pass')
.attr('dx', '10px')
.attr('dy', '20px');},delay * 8);
setTimeout(function(){
console.log('=======================================================');
log('text_node_1');
console.log('=======================================================');
log('text_node_2');
console.log('=======================================================');
log('text_node_3');
console.log('=======================================================');
log('text_node_4');
}, delay * 9);
}
//Events for buttons
document.getElementById('render_nodes_blocking').addEventListener(
'click',
function(){
create_nodes_blocking(
parseFloat( (document.getElementById('pause_delay').value || 200), 10)
);
});
document.getElementById('render_nodes_non_blocking').addEventListener(
'click',
function(){
create_nodes_non_blocking(
parseFloat( (document.getElementById('pause_delay').value || 200), 10)
);
});
//NOTE: Calling non_blocking ALWAYS works (as long as delay is > 1ms)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment