toolkit/javascript/d3/examples/axis/axis-alternating.html
changeset 47 c0b4a8b5a012
equal deleted inserted replaced
46:efd9c589177a 47:c0b4a8b5a012
       
     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 line, path {
       
    12   fill: none;
       
    13   stroke: #000;
       
    14   shape-rendering: crispEdges;
       
    15 }
       
    16 
       
    17 .minor :not(.minor) {
       
    18   display: none;
       
    19 }
       
    20 
       
    21     </style>
       
    22   </head>
       
    23   <body>
       
    24     <script type="text/javascript">
       
    25 
       
    26 var m = [10, 10, 20, 10],
       
    27     w = 960 - m[1] - m[3],
       
    28     h = 80 - m[0] - m[2],
       
    29     x = d3.scale.linear().domain([.05, .95]).range([0, w]),
       
    30     y = d3.scale.linear().range([0, h]);
       
    31 
       
    32 var svg = d3.select("body").append("svg:svg")
       
    33     .attr("width", w + m[1] + m[3])
       
    34     .attr("height", h + m[0] + m[2])
       
    35   .append("svg:g")
       
    36     .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
       
    37 
       
    38 svg.append("svg:g")
       
    39     .attr("class", "x minor")
       
    40     .attr("transform", "translate(0," + h + ")")
       
    41     .call(d3.svg.axis().scale(x).tickSubdivide(2).tickSize(-6));
       
    42 
       
    43 svg.append("svg:g")
       
    44     .attr("class", "x axis")
       
    45     .attr("transform", "translate(0," + h + ")")
       
    46     .call(d3.svg.axis().scale(x));
       
    47 
       
    48     </script>
       
    49   </body>
       
    50 </html>