Даты и время на осях

Нередко одна из осей служит для отображения временных интервалов или значений времени. Для работы с временными отрезками наиболее эффективно будет использование функции интерполяции времени на числовую ось:

var height = 500;
var width = 500;
var margin = 25;
var offset = 50;
var axisWidth = width - 2 * margin; 
var svg;
createAxes();
function createAxes(){

	svg = d3.select("body").append("svg")
	.attr("class", "axis")
	.attr("width", width)
	.attr("height", height);
	
	// функция интерполяции времени на оси
	var scale = d3.time.scale() // от 1 января 2015 года до текущей даты
				.domain([new Date(2015, 0, 1), new Date()])
				.range([0, axisWidth]);

	var axis = d3.svg.axis() 
				.scale(scale)
				.orient('bottom')
				.ticks(5);

	svg.append("g")
		.attr("transform", "translate("+margin+","+offset+")")
		.call(axis);
}

Форматирование дат

D3.js позволяет форматировать выводимые по одной из осей даты. Для этого применяются следующие форматы:

• %a: аббревиатура дня недели

• %A: полное название дня недели

• %b: аббревиатура месяца

• %B: полное название месяца

• %d: номер дня месяца в формате от 01 до 31

• %e: номер дня месяца в формате от 1 до 31 (без начального нуля перед числами)

• %H: час дня в формате от 00 до 23

• %I: час дня в формате от 01 до 12

• %j: номер дня года от 001 до 366

• %m: номер месяца в формате от 01 до 12

• %M: количество минут в формате от 00 до 59

• %L: количество миллисекунд в формате от 000 до 999

• %p: AM или PM

• %S: количество секунд в формате от 00 до 59

• %x: дата в формате "%m/%d/%Y"

• %X: время в формате "%H:%M:%S"

• %y: номер года текущего столетия в формате от 00 до 99

• %Y: полный номер года

Эти форматы можно комбинировать. Например, чтобы даты по оси отображались в формате "день.месяц", мы можем создать ось следующим образом:

var axis = d3.svg.axis() 
			.scale(scale)
			.orient('bottom')
			.ticks(5)
			.tickFormat(d3.time.format('%d.%m'));