equal
deleted
inserted
replaced
|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <script type="text/javascript" src="../../d3.js"></script> |
|
5 <style type="text/css"> |
|
6 |
|
7 body { |
|
8 font: 10px sans-serif; |
|
9 } |
|
10 |
|
11 rect { |
|
12 fill: #ddd; |
|
13 } |
|
14 |
|
15 .grid line { |
|
16 stroke: #fff; |
|
17 } |
|
18 |
|
19 .grid line.minor { |
|
20 stroke-width: .5px; |
|
21 } |
|
22 |
|
23 .grid text { |
|
24 display: none; |
|
25 } |
|
26 |
|
27 .axis line { |
|
28 stroke: #000; |
|
29 } |
|
30 |
|
31 path { |
|
32 display: none; |
|
33 } |
|
34 |
|
35 </style> |
|
36 </head> |
|
37 <body> |
|
38 <script type="text/javascript"> |
|
39 |
|
40 var m = [10, 10, 20, 10], |
|
41 w = 960 - m[1] - m[3], |
|
42 h = 80 - m[0] - m[2], |
|
43 x = d3.scale.linear().domain([.05, .95]).range([0, w]), |
|
44 y = d3.scale.linear().range([0, h]); |
|
45 |
|
46 var svg = d3.select("body").append("svg:svg") |
|
47 .attr("width", w + m[1] + m[3]) |
|
48 .attr("height", h + m[0] + m[2]) |
|
49 .append("svg:g") |
|
50 .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); |
|
51 |
|
52 svg.append("svg:rect") |
|
53 .attr("width", w) |
|
54 .attr("height", h); |
|
55 |
|
56 svg.append("svg:g") |
|
57 .attr("class", "x grid") |
|
58 .attr("transform", "translate(0," + h + ")") |
|
59 .call(d3.svg.axis().scale(x).tickSubdivide(1).tickSize(-h)); |
|
60 |
|
61 svg.append("svg:g") |
|
62 .attr("class", "x axis") |
|
63 .attr("transform", "translate(0," + h + ")") |
|
64 .call(d3.svg.axis().scale(x)); |
|
65 |
|
66 </script> |
|
67 </body> |
|
68 </html> |