<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
</style>
<body>
<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script>
function ilog(text) {
console.log(text);
return text;
}
function daysInMonth(month,year) {
var m = [31,28,31,30,31,30,31,31,30,31,30,31];
if (month != 2) return m[month - 1];
if (year%4 != 0) return m[1];
if (year%100 == 0 && year%400 != 0) return m[1];
return m[1] + 1;
}
function d3_time_range(floor, step, number) {
return function(t0, t1, dt) {
var time = floor(t0), times = [];
if (time < t0) step(time);
if (dt > 1) {
while (time < t1) {
var date = new Date(+time);
if (!(number(date) % dt)) times.push(date);
step(time);
}
} else {
while (time < t1) times.push(new Date(+time)), step(time);
}
return times;
};
}
d3.time.monthEnd = function(date) {
return new Date(date.getFullYear(), date.getMonth(), 0);
};
d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
date.setUTCDate(date.getUTCDate() + 1);
date.setDate(daysInMonth(date.getMonth() + 1, date.getFullYear()));
}, function(date) {
return date.getMonth();
}
);
var margin = {top: 10, right: 40, bottom: 40, left: 40},
width = 960 - margin.left - margin.right,
height = 80 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([new Date(2010, 0, 1), new Date(2011, 0, 1)])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
//.ticks(d3.time.months)
.ticks(d3.time.monthEnds)
//.tickSubdivide(3)
.tickSize(8, 4, 0)
.tickFormat(d3.time.format("%x"));
//.tickFormat(d3.time.format("%B"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("text-anchor", "middle")
//.attr("text-anchor", "start")
.attr("x", 0)
.attr("y", 12);
</script>