toolkit/javascript/d3/examples/hello-world/hello-transform.html
changeset 47 c0b4a8b5a012
equal deleted inserted replaced
46:efd9c589177a 47:c0b4a8b5a012
       
     1 <!DOCTYPE html>
       
     2 <html>
       
     3   <head>
       
     4     <title>Hello, world!</title>
       
     5     <script type="text/javascript" src="../../d3.js"></script>
       
     6   </head>
       
     7   <body>
       
     8     Your lucky numbers are:<br>
       
     9     <span></span>
       
    10     <span></span>
       
    11     <span></span>
       
    12     <span></span>
       
    13     <span></span>
       
    14     <script type="text/javascript">
       
    15 
       
    16 d3.selectAll("span")
       
    17   .append("svg:svg")
       
    18     .attr("width", 100)
       
    19     .attr("height", 100)
       
    20   .append("svg:text")
       
    21     .attr("x", "50%")
       
    22     .attr("y", "50%")
       
    23     .attr("dy", ".35em")
       
    24     .attr("text-anchor", "middle")
       
    25     .attr("fill", "white")
       
    26     .attr("stroke", "black")
       
    27     .attr("stroke-width", 1.5)
       
    28     .style("font", "36pt Comic Sans MS")
       
    29     .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)")
       
    30     .text(function() { return ~~(Math.random() * 100); });
       
    31 
       
    32 function transform() {
       
    33   d3.selectAll("text")
       
    34       .text(function() { return ~~(Math.random() * 100); });
       
    35 }
       
    36 
       
    37 window.addEventListener("keypress", transform, false);
       
    38 
       
    39     </script>
       
    40   </body>
       
    41 </html>