|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.axis text { |
|
font: 10px sans-serif; |
|
} |
|
|
|
.axis line, |
|
.axis path { |
|
fill: none; |
|
stroke: #000; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="//d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
|
|
// Establish the desired formatting options using locale.format(): |
|
// https://github.com/d3/d3-time-format/blob/master/README.md#locale_format |
|
var formatMillisecond = d3.timeFormat(".%L"), |
|
formatSecond = d3.timeFormat(":%S"), |
|
formatMinute = d3.timeFormat("%I:%M"), |
|
formatHour = d3.timeFormat("%I %p"), |
|
formatDay = d3.timeFormat("%a %d"), |
|
formatWeek = d3.timeFormat("%b %d"), |
|
formatMonth = d3.timeFormat("%B"), |
|
formatYear = d3.timeFormat("%Y"); |
|
|
|
// Define filter conditions |
|
function multiFormat(date) { |
|
return (d3.timeSecond(date) < date ? formatMillisecond |
|
: d3.timeMinute(date) < date ? formatSecond |
|
: d3.timeHour(date) < date ? formatMinute |
|
: d3.timeDay(date) < date ? formatHour |
|
: d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek) |
|
: d3.timeYear(date) < date ? formatMonth |
|
: formatYear)(date); |
|
} |
|
|
|
var margin = {top: 250, right: 40, bottom: 250, left: 40}, |
|
width = 960 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
var x = d3.scaleTime() |
|
.domain([new Date(2015, 0, 1), new Date(2017, 0, 1)]) |
|
.range([0, width]); |
|
|
|
// Use the custom scale |
|
var xAxis = d3.axisBottom() |
|
.scale(x) |
|
.tickFormat(multiFormat); |
|
|
|
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); |
|
|
|
</script> |
