d3 tspan append

<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="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>

</svg>
<script src='https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js'></script>

//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);

//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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js