Графики и диаграммы

Координатные оси

Последнее обновление: 1.11.2015

Для построения линейных графиков нам необходимы координатные оси. И поскольку линейные графики не мыслимы без осей, то в библиотеке d3.js имеется специальный метод d3.svg.axis(), который позволяет строить координатные оси. Рассмотрим на примере построения горизонтальной оси:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"> </script>
<style>
.axis path, .axis line {
    fill: none;
    stroke: steelblue;
}

.axis text {
    font: 10px Verdana;
}
</style>
<body>

<script type="text/javascript">
var height = 500; // длина оси Y
var width = 500; // длина оси X
var margin = 25; // отступ
var offset = 50; // смещение между значениями на осях
// добавляем к оси отступы слева и справа
var axisWidth = width - 2 * margin; 
var svg; //объект svg, который будет содержать визуализацию
createAxes();
function createAxes(){
	// создаем объект svg
	svg = d3.select("body").append("svg")
		.attr("class", "axis")
		.attr("width", width)
		.attr("height", height);
	
	// функция интерполяции значений на оси
	var scale = d3.scale.linear()
				.domain([0, 1000])
				.range([0, axisWidth]);
	// создание осей
	var axis = d3.svg.axis() 
			.scale(scale) // функция интерполяции
			.orient('bottom') // горизонтальная
			.ticks(5); // сколько делений на оси
	// добавляем элемент с осями на страницу
	svg.append("g")
		.attr("transform", "translate("+margin+","+offset+")")
		.call(axis);
}
</script>
</body>
</html>
Горизонтальная ось X в D3.js

Вся логика по созданию оси X размещается в функции createAxes и разбивается на несколько этапов.

Во-первых, необходимо создать объект svg, который будет заключать ось:

svg = d3.select("body").append("svg")
	.attr("class", "axis")
	.attr("width", width)
	.attr("height", height);

Во-вторых, надо примерно осознавать разброс значений данных, которые должны быть отображены на графике. В нашем случае пока никаких данных нет, но грубо говоря представим, что ориентировочный диапазон данных будет от 0 до 1000. Эти значения должны накладываться на ось X, которая будет иметь длину в 450 пикселей - значение width (ширина объекта svg) минус отступы справа и слева по 25 пикселей. И для сопоставления значений задаем функцию линейной интерполяции:

var scale = d3.scale.linear()
	.domain([0, 1000])
	.range([0, axisWidth]);

Далее собственно создаем горизонтальную ось:

var axis = d3.svg.axis() 
		.scale(scale)
		.orient('bottom') // горизонтальная
		.ticks(5); // сколько делений на оси

Чтобы создать ось, нужна функция интерполяции scale для сопоставления значений данных с экранными координатами. Так как оси могут быть горизонтальными и вертикальными, то надо задать ориентацию оси с помощью функции orient().

Для создания горизонтальной оси в эту функцию в качестве параметра передается параметр 'bottom'. 'Bottom' также задает расположение текстовых меток по - под линией оси. Однако мы можем задать и над осевое расположение текста, передав вместо 'bottom' строку 'top'.

Построение оси Y будет отличаться от оси X только тем, что в функцию orient() будет передаваться параметр 'left' (расположение текстовых меток слева от оси) или 'right' (расположение меток справа от оси).

Последняя функция по цепочке ticks() задает количество делений на оси. Однако реальное число делений также будет зависеть от того, как алгоритмы D3.js оптимальным образом расположат деления по оси.

Финальная часть состоит в отрисовке оси:

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

В контейнере svg оси должны размещаться внутри элемента g. С помощью атрибута transform, которому в качестве значения задается translate(25, 50), элемент g сдвигается по X на 25 единиц и по Y на 50 единиц. А функция call() передает и отрисовывает в элементе g ось.

Если мы обратимся к отрисованной ось в инспекторе элементов, то увидим ее сложную структуру:

Координатные оси в D3.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850