|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <script type="text/javascript" src="../../d3.js"></script> |
|
5 <script type="text/javascript" src="../../d3.time.js"></script> |
|
6 <style type="text/css"> |
|
7 |
|
8 body { |
|
9 font: 10px sans-serif; |
|
10 } |
|
11 |
|
12 .axis line, .axis path { |
|
13 fill: none; |
|
14 stroke: #000; |
|
15 shape-rendering: crispEdges; |
|
16 } |
|
17 |
|
18 </style> |
|
19 </head> |
|
20 <body> |
|
21 <script type="text/javascript"> |
|
22 |
|
23 var m = [20, 40, 20, 40], |
|
24 w = 960 - m[1] - m[3], |
|
25 h = 500 - m[0] - m[2], |
|
26 x = d3.time.scale().domain([new Date(2011, 07, 01), new Date(2011, 07, 08)]).range([0, w]), |
|
27 y = d3.scale.sqrt().range([h, 0]); |
|
28 |
|
29 var xAxis = d3.svg.axis() |
|
30 .scale(x) |
|
31 .ticks(d3.time.days) |
|
32 .tickFormat(d3.time.format("%m/%d")); |
|
33 |
|
34 var yAxis = d3.svg.axis() |
|
35 .scale(y); |
|
36 |
|
37 var svg = d3.select("body").append("svg:svg") |
|
38 .attr("width", w + m[1] + m[3]) |
|
39 .attr("height", h + m[0] + m[2]) |
|
40 .append("svg:g") |
|
41 .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); |
|
42 |
|
43 svg.append("svg:g") |
|
44 .attr("class", "bottom axis") |
|
45 .attr("transform", "translate(0," + h + ")") |
|
46 .call(xAxis.orient("bottom")); |
|
47 |
|
48 svg.append("svg:g") |
|
49 .attr("class", "top axis") |
|
50 .call(xAxis.orient("top")); |
|
51 |
|
52 svg.append("svg:g") |
|
53 .attr("class", "left axis") |
|
54 .call(yAxis.orient("left")); |
|
55 |
|
56 svg.append("svg:g") |
|
57 .attr("class", "right axis") |
|
58 .attr("transform", "translate(" + w + ",0)") |
|
59 .call(yAxis.orient("right")); |
|
60 |
|
61 </script> |
|
62 </body> |
|
63 </html> |