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