100 lines
2.4 KiB
HTML
100 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link href="../src/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>
|