| 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 | <script type="text/javascript"> |
|---|
| 11 | |
|---|
| 12 | var data = [4, 8, 15, 16, 23, 42]; |
|---|
| 13 | |
|---|
| 14 | d3.select("span") |
|---|
| 15 | .selectAll("svg") |
|---|
| 16 | .data(data) |
|---|
| 17 | .enter().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 | .attr("cursor", "pointer") |
|---|
| 29 | .style("font", "36pt Comic Sans MS") |
|---|
| 30 | .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)") |
|---|
| 31 | .text(function(d) { return d; }) |
|---|
| 32 | .on("click", click) |
|---|
| 33 | .on("mouseover", mouseover) |
|---|
| 34 | .on("mouseout", mouseout); |
|---|
| 35 | |
|---|
| 36 | function click(d, i) { |
|---|
| 37 | console.log("click", d, i); |
|---|
| 38 | } |
|---|
| 39 | |
|---|
| 40 | function mouseover(d, i) { |
|---|
| 41 | d3.select(this) |
|---|
| 42 | .attr("fill", "brown") |
|---|
| 43 | .attr("stroke", "grey"); |
|---|
| 44 | } |
|---|
| 45 | |
|---|
| 46 | function mouseout(d, i) { |
|---|
| 47 | d3.select(this) |
|---|
| 48 | .attr("fill", "orange"); |
|---|
| 49 | } |
|---|
| 50 | |
|---|
| 51 | </script> |
|---|
| 52 | </body> |
|---|
| 53 | </html> |
|---|
