|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Superformula</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="superformula.js"></script> |
|
7 <style type="text/css"> |
|
8 |
|
9 path { |
|
10 stroke-width: 1.5px; |
|
11 } |
|
12 |
|
13 path.small { |
|
14 fill: steelblue; |
|
15 } |
|
16 |
|
17 path.big { |
|
18 stroke: #666; |
|
19 fill: #ddd; |
|
20 } |
|
21 |
|
22 path.small:hover { |
|
23 stroke: steelblue; |
|
24 fill: lightsteelblue; |
|
25 } |
|
26 |
|
27 </style> |
|
28 </head> |
|
29 <body> |
|
30 <script type="text/javascript"> |
|
31 |
|
32 var size = 1000; |
|
33 |
|
34 var x = d3.scale.ordinal() |
|
35 .domain(superformulaTypes) |
|
36 .rangePoints([0, 960], 1); |
|
37 |
|
38 var svg = d3.select("body").append("svg:svg") |
|
39 .attr("width", 960) |
|
40 .attr("height", 500); |
|
41 |
|
42 var small = superformula() |
|
43 .type(String) |
|
44 .size(size); |
|
45 |
|
46 var big = superformula() |
|
47 .type("square") |
|
48 .size(size * 50) |
|
49 .segments(360); |
|
50 |
|
51 svg.selectAll("a") |
|
52 .data(superformulaTypes) |
|
53 .enter().append("svg:a") |
|
54 .attr("xlink:title", String) |
|
55 .attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; }) |
|
56 .append("svg:path") |
|
57 .attr("class", "small") |
|
58 .attr("d", small) |
|
59 .on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); }) |
|
60 .on("mouseup", function() { d3.select(this).style("fill", null); }) |
|
61 .on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); }); |
|
62 |
|
63 svg.append("svg:path") |
|
64 .attr("class", "big") |
|
65 .attr("transform", "translate(450,250)") |
|
66 .attr("d", big); |
|
67 |
|
68 </script> |
|
69 </body> |
|
70 </html> |